随机播放js - 如何使排序，图像和图像加载工作

Question

我已经把头发拉了几个小时，所以希望有人可以帮助我。在遇到同位素的响应网格问题后，我想我会尝试洗牌js。

我正在尝试获得一个大小相同的响应网格，在调整浏览器大小时保持其比例（因此100％的图像始终可见）

有一个过滤/排序的演示，我可以在这里主要工作：

http://vestride.github.io/Shuffle/

但是在演示中，当浏览器调整大小时，框的比例会发生变化，它不会使用imagesLoaded，因为某些原因我会丢失图像之间的水槽。

这里有一个使用imagesLoaded js图像的演示：

http://vestride.github.io/Shuffle/images/

我可以完美地重现这一点 - 这正是我需要保持比例的图像，但它没有过滤......

当我尝试组合两个js文件时，我遇到了各种各样的麻烦......并且花了好几个小时无处可去。我的jQuery技能还有很多不足之处我害怕！

这些是我需要通过将第二个的排序功能添加到第一个来组合的2个.js文件。

任何帮助都会受到重视

感谢

var ImageDemo = (function( $, imagesLoaded ) {

        var $shuffle = $('.shuffle--images'),
            $imgs = $shuffle.find('img'),
            $loader = $('#loader'),
            sizer = document.getElementById('js-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: '.js-item'
          });
        };

        return {
          init: init
        };
      }( jQuery, window.imagesLoaded ));

      $(document).ready(function() {
        ImageDemo.init();
      });

和

 var DEMO = (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();
          setupSorting();
          setupSearching();
        }, 100);

        // You can subscribe to custom events.
        // shrink, shrunk, filter, filtered, sorted, load, done
        $grid.on('loading.shuffle done.shuffle shrink.shuffle shrunk.shuffle filter.shuffle filtered.shuffle sorted.shuffle layout.shuffle', function(evt, shuffle) {
          // Make sure the browser has a console
          if ( window.console && window.console.log && typeof window.console.log === 'function' ) {
            console.log( 'Shuffle:', evt.type );
          }
        });

        // instantiate the plugin
        $grid.shuffle({
          itemSelector: '.picture-item',
          sizer: $sizer
        });

        // Destroy it! o_O
        // $grid.shuffle('destroy');
      },

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

      setupSorting = function() {
        // Sorting options
        $('.sort-options').on('change', function() {
          var sort = this.value,
              opts = {};

          // We're given the element wrapped in jQuery
          if ( sort === 'date-created' ) {
            opts = {
              reverse: true,
              by: function($el) {
                return $el.data('date-created');
              }
            };
          } else if ( sort === 'title' ) {
            opts = {
              by: function($el) {
                return $el.data('title').toLowerCase();
              }
            };
          }

          // Filter elements
          $grid.shuffle('sort', opts);
        });
      },

      setupSearching = function() {
        // Advanced filtering
        $('.js-shuffle-search').on('keyup change', function() {
          var val = this.value.toLowerCase();
          $grid.shuffle('shuffle', function($el, shuffle) {

            // Only search elements in the current group
            if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
              return false;
            }

            var text = $.trim( $el.find('.picture-item__title').text() ).toLowerCase();
            return text.indexOf(val) !== -1;
          });
        });
      },

      // 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() {
      DEMO.init();
    });