最近自己测试着搞一些小研究，看到很多新的网站都喜欢用瀑布流布局，就自己模拟搞了一份，搞完之后发现还能改进，添加新的对象如父级容器、每块的宽度，间隔，这样可以替换代码中的宽度数字。
原理很简单，就是先区分每列，给每列的块加上不同的样式，例如第一列的所有块都是class1，第二列的都是class2，依次类推，然后再依次给每块定位。
JQ写的，要用到JQ库
html代码部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>瀑布流测试</title> <style type="text/css"> *{ margin:0; padding:0;} .container{ width:100%; float:left; padding-top:30px;} div.center{position:relative; margin:0 auto; width:920px} div.center div{position:absolute; width:200px;} </style> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="web.js"></script> <script type="text/javascript"> $(function(){ pubu(".center div",4); }) </script> </head> <body> <div class="container"> <div class="center"> <div style="height:300px; background:#999"></div> <div style="height:400px; background:#CFF"></div> <div style="height:350px; background:#CCF"></div> <div style="height:450px; background:#C9F"></div> <div style="height:250px; background:#CC6"></div> <div style="height:270px; background:#6F6"></div> <div style="height:300px; background:#F69"></div> <div style="height:360px; background:#0CC"></div> <div style="height:390px; background:#0F3"></div> <div style="height:350px; background:#00F"></div> </div> </div> </body> </html>
jq部分
// JavaScript Document //瀑布流布局测试by 王2013-9-18(可改进，增加父级容器、模块宽度、模块间隔) function pubu(box,num){ //取排列的块为box，列数num var box=$(box) //区分每列 var l=box.length,i,o; var e=l/num+1; for(i=1;i<e;i++){ if(o<1){ o=1 }else{o=o-1}; for(o=1;o<num+1;o++){ box.eq(i*num-o).addClass("class"+o); } } //定位 for(var t=0;t<num;t++){ box.eq(t).css({"top":0,"left":230*t}); x=box.eq(t).attr("class"); var j='"'+'.'+x+'"'; var cl=eval(j); var x=$(cl).length; var sum=0; for(var k=0;k<x;k++){ var s=$(cl).eq(k).height(); sum=sum+s; $(cl).eq(k+1).css({"top":sum+30*(k+1),"left":230*t}); } } }