如上图所示:在加载的时候出现这样的情况!图片的宽度是一样。在加载第一二页的时候还可以填满,但是加载到第三页是就出现了这样的情况!
js代码如下:
$(function(){
    
    var $container = $('#wrap_flow');
    $container.imagesLoaded(function(){
        $container.masonry({
          itemSelector: '.box',
        });
      });
    $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 ); 
          });
        }
      );    
  });JavaScript瀑布流