jquery - 让 Shuffle.js 和过滤发挥作用

Question

我被难住了。设置了砌体部分，但不明白为什么过滤不起作用。我已经看完了这个脚本，与演示网站上的脚本相比，我快要疯了。

我正在使用:https://github.com/Vestride/Shuffle和 Bootstrap 3。这可能与 Bootstrap 无关。

带编辑的演示:http://jsbin.com/vaquci/1/edit

演示:http://jsbin.com/vaquci/1/

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;
}

Answer 1

显然，尽管文档中没有，但脚本 http://benalman.com/projects/jquery-throttle-debounce-plugin/也是一个依赖项:

所以添加:

http://benalman.com/projects/jquery-throttle-debounce-plugin/

演示:http://jsbin.com/vaquci/2