我很难过.已经设置了砌体部件,但无法理解为什么过滤不起作用.我已经阅读过脚本,与演示网站上的那个相比,我疯了.
我正在使用：https://github.com/Vestride/Shuffle和Bootstrap 3.这可能与Bootstrap无关.
DEMO w / edit：http://jsbin.com/vaquci/1/edit
HTML包含所有依赖项:: jQuery 1.9.1或更高版本,Modernizr等,
HTML
<div class="container">
<div class="filter-options">
<button class="btn btn-default" data-group="wallpaper">Wallpapers</button>
<button class="btn btn-default" data-group="graphics">Graphic Design</button>
<button class="btn btn-default" data-group="photography">Photos</button>
<button class="btn btn-default" data-group="3d">3D Renders</button>
</div>
<div id="grid" class="row">
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
<img src="http://placehold.it/400x534" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x566" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
<img src="http://placehold.it/400x600" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
<img src="http://placehold.it/400x504" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
<img src="http://placehold.it/400x316" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
<img src="http://placehold.it/400x600" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
<img src="http://placehold.it/400x594" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
<img src="http://placehold.it/400x400" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
<img src="http://placehold.it/400x400" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
<img src="http://placehold.it/400x796" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x534" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x566" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x600" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x504" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x316" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x600" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x594" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x400" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x400" alt="" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
<img src="http://placehold.it/400x796" alt="" class="img-responsive">
</div>
<!-- sizer -->
<div class="col-xs-6 col-sm-4 col-md-3 shuffle_sizer"></div>
</div><!-- /#grid -->
</div><!-- /.container -->
jQuery的：
var shuffleme = (function( $) {
'use strict';
var $grid = $('#grid'),$filterOptions = $('.filter-options'),$sizer = $grid.find('.shuffle_sizer'),init = function() {
// None of these need to be executed synchronously
setTimeout(function() {
listen();
setupFilters();
},100);
// instantiate the plugin
$grid.shuffle({
itemSelector: '[class*="col-"]',sizer: $sizer
});
},// Set up button clicks
setupFilters = function() {
var $btns = $filterOptions.children();
$btns.on('click',function() {
var $this = $(this),isActive = $this.hasClass( 'active' ),group = isActive ? 'all' : $this.data('group');
// Hide current label,show current label in title
if ( !isActive ) {
$('.filter-options .active').removeClass('active');
}
$this.toggleClass('active');
// Filter elements
$grid.shuffle( 'shuffle',group );
});
$btns = null;
},// Re layout shuffle when images load. This is only needed
// below 768 pixels because the .picture-item height is auto and therefore
// the height of the picture-item is dependent on the image
// I recommend using imagesloaded to determine when an image is loaded
// but that doesn't support IE7
listen = function() {
var debouncedLayout = $.throttle( 300,function() {
$grid.shuffle('update');
});
// Get all images inside shuffle
$grid.find('img').each(function() {
var proxyImage;
// Image already loaded
if ( this.complete && this.naturalWidth !== undefined ) {
return;
}
// If none of the checks above matched,simulate loading on detached element.
proxyImage = new Image();
$( proxyImage ).on('load',function() {
$(this).off('load');
debouncedLayout();
});
proxyImage.src = this.src;
});
// Because this method doesn't seem to be perfect.
setTimeout(function() {
debouncedLayout();
},500);
};
return {
init: init
};
}( jQuery ));
$(document).ready(function() {
shuffleme.init();
});
CSS
#grid {margin-left:-5px;margin-right:-5px;position:relative; overflow: hidden;}
#grid [class*="col-"] {padding:5px;}
@media (max-width:320px) {
#grid [class*="col-"] {width:100%;}
}
.shuffle_sizer {
position: absolute;
opacity: 0;
visibility: hidden;
}
