jQuery瀑布流插件 Masonry.js

1、这样参差不齐的多栏布局，叫“方砖石布局”，和“瀑布流布局”，很多网站都有使用这样的布局，比如：淘宝的哇哦、花瓣网、蘑菇街

2、这里，我们仅使用瀑布流插件实现当页内容的排列。右图是左图使用了插件之后的效果。

3、分别下载 jQuery 与 Masonry 下载之后的脚本文件嵌入到你想使用瀑布流形式的页面中，注意文件的名称与路径，根据你自己的实际情况修改。

4、页面代码（html）<divid="masonry"><divclass="item"><imgsrc="touxiang-@3x.png"></div><divclass="item"><imgsrc="test.png"></div><divclass="item"><imgsrc="touxiang-@3x.png"></div><divclass="item"><imgsrc="test.png"></div><divclass="item"><imgsrc="touxiang-@3x.png"></div><divclass="item"><imgsrc="test.png"></div></div>把每个小内容块放在一个拥有相关类的容器里，然后把所有的内容块放在一个大的容器里，这里我们把内容块图片放在一个拥有 .item 类的 <div> 标签里，然后把他们又使用带有 #masonry ID 的 <div> 里面，一会儿我们会用 #masonry ID 和 .box 类来触发使用瀑布流。（图片中我是结合了bootstrap框架做成的相应式瀑布流）

5、样式代码#masonry {padding:20px;}.item{margin-bottom:20px;float:left;width:220px;}.itemimg{max-width:100%}针对第二步的页面代码，我们需要添加一点样式，.item 类我们添加了浮动属性，还设置了他的宽度

6、4，在页面中启用瀑布流形式的脚本代码<script>$('#masonry').imagesLoaded(function() {$('#masonry').masonry({itemSelector: '.item'});});</script>

7、需要注意的是，如果你需要加载图片，Masonry不会在图片加载完后重新布局，这可能会影响你的布局效果，建议配合使用imagesloaded插件。