结合jQuery代码- ImagesLoaded + Shuffle.js

Question

我的目标是把setupSorting函数放在ImageLoad函数里面。它们分开时可以工作(这里)，但是组合时排序失败(这里)。

:

      $(document).ready (function(){
            /* reshuffle when user clicks a filter item */
            $('.filter-tags a').click(function (e) {
                e.preventDefault();
                // set active class
                $('.filter-tags a').removeClass('active');
                $(this).addClass('active');
                // get group name from clicked item
                var groupName = $(this).attr('data-group');
                // reshuffle grid
                $grid.shuffle('shuffle', groupName );
            });  
     

需要放在this里面:

var ImageLoad = (function( $, imagesLoaded ) {
  var $shuffle = $('.masonry-gallery'),
      $imgs = $shuffle.find('img'),
      $loader = $('#loader'),
      sizer = document.getElementById('#shuffle-sizer'),
      imgLoad,
  init = function() {
    // Create a new imagesLoaded instance
    imgLoad = new imagesLoaded( $imgs.get() );
    // Listen for when all images are done
    // will be executed even if some images fail
    imgLoad.on( 'always', onAllImagesFinished );
  },
  onAllImagesFinished = function( instance ) {
    if ( window.console && window.console.log ) {
      console.log( instance );
    }
    // Hide loader
    $loader.addClass('hidden');
    // Adds visibility: visible;
    $shuffle.addClass('images-loaded');
    // Initialize shuffle
    $shuffle.shuffle({
      sizer: sizer,
      itemSelector: '.gallery-photo'
    });
  };
  return {
    init: init
  };
}( jQuery, window.imagesLoaded ));
$(document).ready(function() {
  ImageLoad.init();
});  

最终目标是像这个页面一样，只有排序:http://vestride.github.io/Shuffle/images/

Answer 1

经过几个小时的实验，我终于明白了。你说得对，我没叫它。我还忘记在合并时将$grid.shuffle更改为$shuffle.shuffle。

仍然没有达到目的，所以我更改了setupSorting函数(以及随后的一些html)，使其更接近作者的

。

结果代码工作!

///////////////////////  IMAGESLOADED & SHUFFLE  //////////////////////
var ImageLoad = (function( $, imagesLoaded ) {
  var $shuffle = $('.masonry-gallery'),
      $filterOptions = $('.filter-list'),
      $imgs = $shuffle.find('.gallery-photo img'),
      $loader = $('#loader'),
      sizer = document.getElementById('#shuffle-sizer'),
      imgLoad,
  init = function() {
      // None of these need to be executed synchronously
    setTimeout(function() {
      setupSorting();
    }, 10);
    // Create a new imagesLoaded instance
    imgLoad = new imagesLoaded( $imgs.get() );
    // Listen for when all images are done
    // will be executed even if some images fail
    imgLoad.on( 'always', onAllImagesFinished );
  },
  onAllImagesFinished = function( instance ) {
    if ( window.console && window.console.log ) {
      console.log( instance );
    }
    // Hide loader
    $loader.addClass('hidden');
    // Adds visibility: visible;
    $shuffle.addClass('images-loaded');
    // Initialize shuffle
    $shuffle.shuffle({
      sizer: sizer,
      itemSelector: '.gallery-photo'
    });
  },
       // Set up button clicks
  setupSorting = 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-list .active').removeClass('active');
      }
      $this.toggleClass('active');
      // Filter elements
      $shuffle.shuffle( 'shuffle', group );
    });
    $btns = null;
  };
  return {
    init: init
  };
}( jQuery, window.imagesLoaded ));
$(document).ready(function() {
    ImageLoad.init();
}); 

你可以看到完整的小提琴(在这里)