Simone
1.这样参差不齐的多栏布局，叫“方砖石布局”，和“瀑布流布局”，很多网站都有使用这样的布局，比如：淘宝的哇哦、花瓣网、蘑菇街
2.这里，我们仅使用瀑布流插件实现当页内容的排列。右图是左图使用了插件之后的效果。
1、分别下载jQuery与Masonry下载之后的脚本文件嵌入到你想使用瀑布流形式的页面中，注意文件的名称与路径，根据你自己的实际情况修改。
2、页面代码（html）
把每个小内容块放在一个拥有相关类的容器里，然后把所有的内容块放在一个大的容器里，这里我们把内容块图片放在一个拥有.item类的标签里，然后把他们又使用带有#masonryID的里面，一会儿我们会用#masonryID和.box类来触发使用瀑布流。（图片中我是结合了bootstrap框架做成的相应式瀑布流）
3、样式代码
#masonry{
padng:20px;
}
.item{
margin-bottom:20px;
float:left;
width:220px;
}
.itemimg{
max-width:100%
}
针对第二步的页面代码，我们需要添加一点样式，.item类我们添加了浮动属性，还设置了他的宽度
6.4，在页面中启用瀑布流形式的脚本代码
$("#masonry").imagesLoaded(function(){
$("#masonry").masonry({
itemSelector:".item"
});
});
7.需要注意的是，如果你需要加载图片，Masonry不会在图片加载完后重新布局，这可能会影响你的布局效果，建议配合使用imagesloaded插件。
