参考刘晓帆大神的瀑布流效果 自己也写了个 希望能给打算写这个效果的朋友一点点思路，也希望朋友们批评指正！
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); } } });