参考刘晓帆大神的瀑布流效果 自己也写了个 希望能给打算写这个效果的朋友一点点思路，也希望朋友们批评指正！
html代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="z-box">
<ul>
<li>
<h3>1A</h3>
<a>aa</a>
<a>aa</a>
<a>aa</a>
</li>
<li>
<h3>2B</h3>
<a>bb</a>
</li>
<li>
<h3>3C</h3>
<a>cc</a>
<a>cc</a>
<a>cc</a>
<a>cc</a>
</li>
<li>
<h3>4D</h3>
<a>dd</a>
<a>dd</a>
<a>dd</a>
<a>dd</a>
<a>dd</a>
<a>dd</a>
<a>dd</a>
</li>
<li>
<h3>5E</h3>
<a>ee</a>
<a>ee</a>
<a>ee</a>
<a>ee</a>
<a>ee</a>
</li>
<li>
<h3>6F</h3>
<a>ff</a>
<a>ff</a>
<a>ff</a>
</li>
<li>
<h3>7G</h3>
<a>GG</a>
<a>GG</a>
<a>GG</a>
</li>
<li>
<h3>8E</h3>
<a>ee</a>
<a>ee</a>
<a>ee</a>
<a>ee</a>
<a>ee</a>
</li>
<li>
<h3>9F</h3>
<a>ff</a>
<a>ff</a>
<a>ff</a>
</li>
<li>
<h3>10G</h3>
<a>GG</a>
<a>GG</a>
<a>GG</a>
</li>
</ul>
</div>
</body>
</html>
css代码：
*{
margin:0px;
padding:0px;
font-size:12px;
}
body{
background:pink;
}
li{
list-style:none;
}
.z-box{
width:300px;
height:auto;
box-shadow:0px 0px 1px red;
margin:0 auto;
position:relative;
}
.z-box ul{
}
.z-box ul li{
width:44px;
text-align:center;
position:absolute;
background:#f3f3f3;
top:0px;
left:40%;
transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-ms-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.z-box ul li a{
display:block;
width:44px;
}javascript代码：
$(function(){
var $oLi=$(".z-box > ul li"); //jq对象
var dWidth=$(".z-box").outerWidth();
var lWidth=$oLi.outerWidth()+5; //li的宽度+间距
var col=Math.round(dWidth/(lWidth+10)); //列数+间距
console.log(col);
var array=[]; //存放列坐标的数组
for(var i=0;i<col;i++){
array.push([i*lWidth,0]); //初始化列的坐标
}
$oLi.each(function(){ //遍历每一个单位
var _temp=0; //最低列暂存体
var _height=$(this).outerHeight(); //获取当前单位的高度
for(var j=0;j<col;j++){
if(array[j][1]<array[_temp][1]){
_temp=j; //比较哪列是最低索引
}
}
$(this).css({"left":array[_temp][0]+"px","top":array[_temp][1]+"px"}); //设置单位的坐标
array[_temp][1] = array[_temp][1] + _height+5; //计算列的最低坐标
});
//获取最高top
var nLi=[],
n=0,
max=0,
nHeight;
for(var i=0;i<col;i++){
if(array[i][1]>array[n][1]){
n=i;
max=array[i][1]-5;
}
}
for(var j=0;j<col;j++){
if(array[j][1]>array[n][1]){
n=j;
$(".z-box").css("height",array[j][1]-5+"px");
console.log("min="+j);
}else{
nHeight=max-array[j][1];
nLi[j]=document.createElement("li");
$(nLi[j]).css("height",nHeight);
$(nLi[j]).css({"left":array[j][0]+"px","top":array[j][1]+"px"});
$(".z-box > ul").append(nLi[j]);
console.log("max="+j);
}
}
});