jquery - 如何使用砌体实现无限滚动？

Question

那么如何在我的砌体流体布局中添加或集成无限滚动？我已经用谷歌搜索但不明白。这是我到目前为止得到的:

/**
 * Base js functions
 */

$(document).ready(function(){
    var $container = $('.container');

    var gutter = 20;
    var min_width = 270;
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.box',
            gutterWidth: gutter,
            isAnimated: true,
              columnWidth: function( containerWidth ) {
                var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

                if (box_width < min_width) {
                    box_width = (((containerWidth - gutter)/2) | 0);
                }

                if (box_width < min_width) {
                    box_width = containerWidth;
                }

                $('.box').width(box_width);

                return box_width;
              }
        });
    });
});

有人可以帮忙吗？非常感谢!

Answer 1

如果您在 masonry site 上查看无限滚动示例的源代码您可以看到完成初始 Masonry 设置后所有工作的函数。在 $container.imagesLoaded 函数之后，添加 Infinite Scroll 配置，然后在回调函数中触发 Masonry。另外，一定要在 jquery.masonry.min.js 之后包含 jquery.infinitescroll.min.js。

这是该页面的 JS:

$(function(){

var $container = $('#container');

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.box',
    columnWidth: 100
  });
});

// Infinite Scroll
$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    // hide new items while they are loading
    var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
      // show elems now they're ready
      $newElems.animate({ opacity: 1 });
      $container.masonry( 'appended', $newElems, true ); 
    });
  }
);

});