如何启用砖石无限滚动？

Question

那么，如何添加或集成我的砌体流体布局的无限滚动？我已经google了，但不明白。这是我到目前为止：

/** 
* 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上的无限滚动示例的源代码，您可以看到在完成初始砌体设置后执行所有工作的功能。在您的$ container.imagesLoaded函数后，添加无限滚动配置，然后在回调函数中触发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); 
    }); 
    } 
); 

}）;