Shuffle.js 加载更多数据

Question

我用https://vestride.github.io/Shuffle/随机播放

我用一个按钮加载数据。

但是他们不带网格功能

我尝试在加载新数据后重新加载 grid/Shuffle 函数

    var POL = (function( $ ) {

    'use strict';


    var $grid = $('#grid'),
      $filterOptions = $('.filter-options'),
      $sizer = $grid.find('.shuffle__sizer'),


    init = function() {
    setTimeout(function() {
      listen();
      setupFilters();
      setupSorting();
    }, 100);
    $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 );
      }
    });
    $grid.shuffle({
      itemSelector: '.picture-item',
      sizer: $sizer
    });
  },
    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');
      $grid.shuffle( 'shuffle', group );
    });
    $btns = null;
    },
    setupSorting = function() {
    $('.sort-options').on('change', function() {
      var sort = this.value,
          opts = {};
      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();
          }
        };
      }
      $grid.shuffle('sort', opts);
    });
    },
  listen = function() {
    var debouncedLayout = $.throttle( 300, function() {
      $grid.shuffle('update');
    });
    $grid.find('img').each(function() {
      var proxyImage;
      if ( this.complete && this.naturalWidth !== undefined ) {
        return;
      }
      proxyImage = new Image();
      $( proxyImage ).on('load', function() {
        $(this).off('load');
        debouncedLayout();
      });
      proxyImage.src = this.src;
    });
    setTimeout(function() {
      debouncedLayout();
    }, 500);
  };   
  return {
    init: init
  };   
    }( jQuery ));
    $(document).on('click','.loadmore',function () {
      $(this).text('Loading...');
         $.ajax({
          url: '/loadmore.php',
          type: 'POST',
          success: function(response){
               if(response){
                    $("#grid").append(response);
                    POL.init();
                  }
                }
       });
    });
    $(document).ready(function() {
    POL.init();
    });

首次加载正常

但点击后加载更多：

After click load more

Answer 1

最后我使用了 Shuffle 中的 append 方法

$grid.append($item);
$grid.shuffle('appended', $item);

巴勃罗

Shuffle.js 加载更多数据

Shuffle.js load more datas

jquery

grid

load

shuffle