sns网站如蘑菇街、美丽说等，商品展示页都采用了瀑布流式的布局。初看时觉得混乱，但习惯后却有它的优点，尤其是处理长宽不一的块的布局，更是便利。

基本用法不难，需要调用jq如jquery-1.7.1.min.js，及插件jquery.masonry.min.js。

页面方面：

<div class="bl_whole" id="bl_whole">
<div class="bl">...</div>
<div class="bl">...</div>
<div class="bl">...</div>
<div class="bl">...</div>
<div class="bl">...</div>
</div>

CSS方面

.bl{width:228px; position: relative; margin-bottom:15px; background-color:transparent;float: left;display: inline;}

脚本方面：
var $main= jq(".bl_whole"); 
$main.imagesLoaded(function(){ 
  $main.masonry({ 
itemSelector : ".bl", 
gutterWidth:16,//列的间隙 Integer 
columnWidth : 228,
singleMode: true
  }); 
});

然而我在实践中发现IE里有兼容性问题出现，部分块会重叠在一起，寻找了另一个解决方案。此方案不需要jq，但注意以下代码要放在页面的块元素之后（不能放前面）。
<script src="/js/masonry.min.js"></script> 
<script>
 window.onload = function() {
var wall = new Masonry( document.getElementById('bl_whole'), {
// options...
columnWidth: 228,
gutterWidth: 16,
isFitWidth: true
 } );
 };
</script>

http://masonry.desandro.com/

http://vanilla-masonry.desandro.com/

jQuery.masonry.min.js下载
masonry.min.js下载