jquery-masonry - 砌体和滚动分页

Question

你们中的任何人都有使用 Masonry.js 和 JQuery scrollPagination 的经验吗？

加载更多后图像重叠。

检查这个网站

无论如何要解决这个问题吗？

Answer 1

我用Masonry和Infinite Scroll 插件。实现起来很简单。

<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>