砌體和滾動頁面

Question

您有沒有經驗的人使用Masonry.js和JQuery scrollPagination？

加載後圖像重疊更多。

Check this website

那是無論如何要解決這一問題？

Answer 1

我已使用Masonry與Infinite Scroll plugin。它很容易實現。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://dl.dropbox.com/u/33213779/jquery.masonry.min.js"></script&gt; 
<script src="http://masonry.desandro.com/js/jquery.infinitescroll.min.js"></script&gt; 
<script> 
$(function(){ 
    var $grid = $('#posts'); 

    $grid.imagesLoaded(function(){ 
     $grid.masonry({ 
      itemSelector : '.item',  
      columnWidth: 250 
     }); 
    }); 

    $grid.infinitescroll({ 
     navSelector : '#footer', // selector for the paged navigation 
     nextSelector : '#footer a', // selector for the NEXT link (to page 2) 
     itemSelector : '.item',  // 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 }); 
     $grid.masonry('appended', $newElems, true); 
    }); 
     } 
    ); 

    }); 
</script>