1. 加载jQuery库、masonry插件

...

2.调整好布局样式后，应用masonry插件实现瀑布流布局

设置好子元素的尺寸样式，使其宽度适应页面布局即可，设置好样式好应用 masonry 插件即可自动将目标元素自动转换为绝对定位并设置好位置坐标。

要注意的是内容其中如果包含图片的话，必须等待图片加载完成，或显示给图片设定尺寸宽度，让需要布局的元素呈现其“最终”的尺寸，避免内容未加载完就进行布局，导致内容加载出来之后元素重叠。（masonry本身包含 imagesLoaded 扩展，可以判断元素内部图片加载完成后执行动作。）

3.滚动加载

参照插件其本身提供的demo例子，需要到另一个插件 infinitescroll 即可以轻松实现滚动加载功能。 其中需要设置参数 navSelector : 页码选择器, nextSelector : “下一页”链接选择器, itemSelector : 加载内容选择器, loading : 加载设置。 如页面代码结构：

  
  

      
   

      
   

      
   

      ...
  
  
  
  

      上一页
      
   1
      2 
      下一页
  
  

需要的设置为：

  $container.infinitescroll({
    navSelector: '.page',
    nextSelector: '.current+a',
    itemSelector: '.item',
    loading: {
        msgText: '正在加载内容...',
        finishedMsg: '没有更多内容',
        img: '/Template/founderResource/Skin/images/loading.gif'
    }
}

即可。

【参考网址】