我的目标是将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 );
            });  

需要深入了解以下内容:

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/

===============>>#1 票数:1 已采纳

经过几个小时的实验,我终于明白了。 没错,我没打电话。 我还忘记了合并时将$shuffle.shuffle更改$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();
}); 

您可以在此处看到完整的小提琴。

  ask by BlueHelmet translate from so

未解决问题?本站智能推荐:

1回复

如何通过jQuery ImagesLoaded加载大量图像

我有一个页面可以将大约150多个图像加载到页面中。 图像的结构是这样的: HTML代码 (我删除了图像的完整路径,使上面的代码最少) CSS代码 JQUERY 我想要实现的是在每个单独的图像上显示预加载微调器(.is-loaded),直到加载了某个图像。
1回复

jQuery-使用imagesLoaded插件无限滚动加载微调器

我在此示例之后使用(砌体+ imagesLoaded + infinitescroll),除加载微调器外,其他一切正常,在imagesLoaded完成之前将其隐藏,这是我的代码: 问题是加载微调器显示在获取内容之后但在imagesLoaded()完成之前,我隐藏了新加载的内容,直到所有图
1回复

Shuffle.js加载更多数据

我使用https://vestride.github.io/Shuffle/ Shuffle 我用一个按钮加载数据。 但是它们不具有网格功能。 我尝试在加载新数据后重新加载表格/随机播放功能 第一次加载好 但是点击后加载更多: 点击后加载更多
1回复

shuffle.js添加3个复合过滤器

我需要在此shuffle.js代码中添加第三个复合过滤器,任何人都可以帮助? 这段代码已经按形状和颜色过滤了项目,我也需要按组过滤。 如果有人单击.filter-options div,是否可以使用data-group=""属性来制作另一个过滤器选项?
1回复

为什么我在使用砌体时在imagesLoaded.js中得到“无法读取null的'长度'属性'”

我正在尝试使用砌体和animonscroll.js复制鼓膜演示。 唯一的区别是我使用的div卡中包含图像,而不仅仅是图像。 这是工作中的鼓膜演示http://jsfiddle.net/Sfmv9/19/light/ 这是我的代码: http : //codepen.io/anon/
1回复

砌体 - imagesLoaded - 不是一个功能

应加载Masonry和imagesLoaded并正常工作。 已经建立了类似的网站,并且它可以正常工作。 我不知道我的问题在哪里,所以我希望你可能会看到问题所在。 应该有一些东西缺失。 在Chrome Inspect中我收到以下错误: 根据我的理解,这意味着.imagesLoa
2回复

如何使用shuffle.js快速调整图片大小?

我在我的主页上使用shuffle.js,并且试图像开发人员在此处发布的此演示中那样,使我的图像响应地调整大小。 现在,我只是将媒体查询用作解决方法,但结果远非理想。 注意:网格已经响应,我想看到的是图像本身也要调整大小。
2回复

同位素不使用imagesLoaded?

我正在使用jQuery Isotope创建一个水平布局,将DIV彼此相邻的100%高度对齐,并将每个DIV中的图像垂直对齐。 因此,我称之为Isotope就像这样,Chrome(本地)的一切正常: 由于图像需要时间加载,它们往往会弄乱Isotope布局,所以我正在尝试使用imagesL
1回复

Packery和imagesLoaded插件无法正常工作?

我在网站上使用Packery并下载了imagesLoaded,但是页面加载时我的图像仍然重叠。 可以在这里看到该网站,我的代码如下: 任何帮助将不胜感激。 编辑: HTML代码如下所示: 等等
1回复

imagesLoaded(砌体)与IE不兼容

我正在将Masonry用于一个项目,并相应地应用imagesLoaded。 经过许多次测试后,我发现这两者几乎完美地结合在一起,但有时它们会失败。 99%的情况是imagesLoaded的错误。 但是,似乎Internet Explorer上的imagesLoaded无法比其他任何