瀑布流布局（Waterfall Layout），听到这个名词你不一定知道是什么，但是你看了下面的图片就会明白了。很多网站都用它来展示图片内容，比如淘宝哇哦、新浪轻博客等。
今天我要分享给大家的就是怎么轻松来搞定瀑布流布局。当然，我不会自己从零开始，要学会重复利用别人的东西，不要重新发明轮子。如果要看本文最新版本，请访问：http://www.vktone.com/articles/waterfall-layout-use-jquery-masonry.html 。（友情提示：本文内容在ITEYE上显示有点乱，最好访问这个地址看）
我用到的就是jQuery的Masonry插件，它是一个用来布局的jQuery插件。配置Masonry相当容易，只需要在jQuery脚本中的 wrapping container元素中加上.masonry()方法。官网地址：http://masonry.desandro.com/index.html 。
废话少说，下面来一步一步展示如何实现瀑布流布局，这个已经在www.vktone.com 博客右侧边栏中用到了。
第一步： 就是要把显示图片的html容器准备好，比如像下面这样
<div id="imgcontainer"> <div class="imgitem">...</div> <div class="imgitem">...</div> <div class="imgitem">...</div> ... </div>
注意：<div class= "imgitem" > ...</div> 里面装的就是你要显示的图片，也可以是带链接的图片，也可以是图片和文字的混合体。
第二步：加入jQuery和jQuery Masonry插件。
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.masonry.min.js"></script>
其中，jQuery下载地址：http://jquery.com/， jQuery Masonry下载地址：http://masonry.desandro.com/jquery.masonry.min.js
第三步： 添加css样式，特别注意要添加 float:left，其它的样式自行调整（比如添加边框border，边距margin等）。
.imgitem {
/* width: 70px; */
margin: 2px;
float: left;
border: solid 1px #ccc;
-webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s;
}第四步： 添加JavaScript脚本
<script type="text/javascript">
//<![CDATA[
function masonryImages(){
var $container = $('#imgcontainer');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.imgitem'
//,columnWidth: 72
});
});
}
$(function(){
masonryImages();
});
//]]>
</script>注意：如果显示图片的html是ajax动态加载的，加载完之后应该调用masonry()重新布局，否则有点乱。比如下面的代码，在加载完之后调用了masonryImages()。
$.ajax({
url: "...",
type: "post",
data: {
...
},
dataType: "jsonp",
success: function(rsp){
if (rsp && rsp.data && rsp.data.html) {
$("#sidebar").replaceWith(rsp.data.html);
masonryImages();
}
},
error: function(){
$("#sidebar").text("加载侧边失败！");
}
});大功告成！ 用jQuery Masonry插件实现瀑布流布局就完成了，轻松吧！
- 源文【四步轻松搞定瀑布流布局】最新版，请访问：
http://www.vktone.com/articles/waterfall-layout-use-jquery-masonry.html