如何啓用磚石無限滾動？

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); 
    }); 
    } 
); 

}）;