如何使用砌体启用无限滚动？

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

/** * 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设置之后完成所有工作的function。 在$ 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://sofzh.miximages.com/jquery/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 ); }); } ); 

}）;