Masonry和scrollPagination

Question

你们中有谁有使用Masonry.js和JQuery scrollPagination的经验吗？

加载后重叠的图像更多。

Check this website

这就是解决这个问题的办法吗？

Answer 1

我在Infinite Scroll plugin中使用过Masonry。它很容易实现。

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