这种布局并不陌生。自2011年Pinterest成立以来，中国互联网迅速掀起模仿Pinterest的热潮。国内很多网站采用瀑布流布局，如花瓣网、美颜论等。其实在中国的互联网上，它模仿的是国外一些流行的车型(当然你也可以说是假货或者抄袭，呵呵！)一直是个好主意。

好了，现在言归正传。本文主要介绍一种瀑布流的实现方法：定位(css) javascript ajax json。简单来说，如果不滚动加载，是定位(css) javascript。当您滚动加载更多内容时，会用到ajax和json。

以下是实现思路：

1.计算页面的宽度和页面上可以放置数据块的列数(如上图所示有6列)。

2.记录数组中每个数据块的高度维度(需要等到所有图片加载完毕，否则无法知道图片的高度)。

3.用定位填充页面的行，因为行的顶部位置是一样的，然后用数组记录每列的总高度。

4.继续使用定位将其他数据块定位在最短列的后面，然后更新列的高度。

5.当浏览器窗口大小发生变化时，再次执行上述步骤1-4重新放电(列数随页面宽度变化，需要重新放电)。

6.当滚动条滚动到底部时，加载新数据，然后将其定位在最短列的位置，然后更新列的高度。

有了思路，再用代码怎么实现。当然，如果看完以上6个步骤就已经知道怎么做了，就不需要仔细看下面的内容了。

首先在页面上写好基本的HTML和CSS（为方便起见，CSS就不外联了），代码如下：

1 DOCTYPE html 2 html 3 head 4 meta http-equiv=' Content-TYPe ' Content=' text/html；charset=UTF-8'5title瀑布流布局title 6 style type=' text/CSS ' 7 body { margin :0；字体系列：微软雅黑；} 8 #流盒{ margin :10 px auto 0 auto adding :0位置位置：relative } 9 #流盒Li { 10 width :190 pxposition : absolute值；padd :10 pxborder 3360 solid 1px # efefefflist-style : none；11电容：0;12-moz-opa city 33600；13filter:alpha(不透明度=0);14-web kit-transit :不透明度500 ms易入易出；15-moz-transit :不透明度500 ms输入输出；16-o-transition : opa前南国际法庭500 ms-in-out；17 transit : opa前南问题国际法庭500 ms易入易出；} 18 #流箱li img {宽度：;} 19 #阿利流盒{显示：块宽度：;文本对齐：中心；font-size :14 px颜色： # 333行高：18 pxmargin-top :10 px；text-decoration : none} 20 .load wrap { position :值；left:0宽度：;文本对齐：中心；} 21 style 22 head 23 body 24 suli=' flow-box ' 25 limgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012121821504156。jpg '/ah ref=' # '图片标题1阿里26 limgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012112718241731。jpg '/ahref=' # '图片标题2 ali27 liimgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012111806582944。jpg '/ahref=' # '图片标题3a Li 28 liimgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012110907231232。jpg '/ahref=' # '图片标题4 ali29 liimgsrc=' http://www .米雄。com/NewsImages/2012110406319529。jpg '/ahref=' # '图片标题5 ali30 llimgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012101808066955。jpg '/ahref=' # '图片标题6 ali31 limgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012101307276582。jpg '/ahref=' # '图片标题7 ali32 limgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012082223432719。jpg '/ahref=' # '图片标题8 ali33 liimgsrc=' http://www .米雄。com/NewsImages/2012082121509065。jpg '/ahref=' # '图片标题9 ali34 limgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012081922387254。jpg '/ahref=' # '图片标题10 ali35 limgsrc=' http://www .米雄。com/NewsImages/2012081700252403。jpg '/ahref=' # '图片标题11 ali36 limgsrc=' http://www .米雄。com/NewsImages/2012081407597304。jpg '/ahref=' # '图片标题12 ali37 liimgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012081218248259。jpg '/ahref=' # '图片标题13 ali38 liimgsrc=' http://www .米雄。com/NewsImages/2012080621278799。jpg '/ahref=' # '图片标题14 ali39 liimgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012072907484455。jpg '/ahref=' # '图片标题15 ali40 llimgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012072521564314。jpg '/ahref=' # '图片标题16 ali41 limgsrc=' http://www .米雄。com/NewsImages/2012072507238259。jpg '/ahref=' # '图片标题17 ali42 limgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012072409035684。jpg '/ahref=' # '图片标题18 ali43 liimgsrc=' http://www .米雄。com/NewsImages/2012072219405236。jpg '/ahref=' # '图片标题19 ali44 limgsrc=' http://www .米雄。请访问www . analog.com/NewsImages/2012071218416980。jpg '/ahref=' # '图片标题20 ali45 ul 46 divided=' load img ' class=' load wrap ' img src=' Images/load。jpg '/div 47 body 48 html

以上代码非常简单，可以看出页面最初将会先加载20个数据块。值得一提的是在半铸钢钢性铸铁(铸造半钢)里面定义了不透明为0,目的是在数据块未排放好之前先隐藏起来，排放好后再将不透明设为一显示出来，另外这里用了css3的过渡做一点体验上的升级；还有一点就是可以看到页面底部有一个编号为"正在加载"的DIV，用来表示数据正在加载中。下面开始用射流研究…实现以上思路(6个步骤)。

1、计算页面的宽度，计算出页面可放数据块的列数

1脚本类型=' text/JavaScript ' 2函数流(MH，mv) {//参数马绍尔群岛(马绍尔群岛的缩写)和平均变化是定义数据块之间的间距，mh是水平距离，mv是垂直距离3 varw=文档。文档元素。用；抵消。//计算页面宽度4 varul=文档。GetElementbyID('流盒')；5 varli=ul。GetElementsBytagName(' Li ')；6 varaw=Li[0].偏移第mh//计算数据块的宽度7 varc=数学。楼层(w/iw)；//计算列数8ul。风格。宽度=iw * c-MH ' px '；//设置保险商实验所的宽度至适合便可以利用钢性铸铁定义的边缘把所有内容居中

9 } 10脚本

注释写得非常明白，这一步不说应该都很容易懂。

2、将各个数据块的高度尺寸记入数组中

1 script type=' text/JavaScript ' 2 function flow(mh，mv){//参数mh和mv定义数据块之间的间距，MH为水平距离，mv为垂直距离3//.省略前一步的一些代码.8ul . style . width=iw * c-MH ' px '；//将ul的宽度设置为合适，然后使用css定义的边距将所有内容居中910varliLen=li.length11 varlenarr=[]；12 for(vari=0；iliLenI) {//遍历每个数据块，记录数组13lenarr.push中的高度(李[I]。右偏)；14 } 15 } 16脚本

由于数据块包含图片且没有给定的大小，需要等待图片加载后才能获取其高度；当window.onload.代码变成：

1 script type=' text/JavaScript ' 2 function flow(mh，mv){//参数mh和mv定义数据块之间的间距，MH为水平距离，mv为垂直距离3//.省略前一步的一些代码.8ul . style . width=iw * c-MH ' px '；//将ul的宽度设置为合适，然后使用css定义的边距将所有内容居中910varliLen=li.length11 varlenarr=[]；12 for(vari=0；iliLenI) {//遍历每个数据块，记录数组13lenarr.push中的高度(李[I]。右偏)；14}15}16//执行17窗口。onload=function () {flow (10，10)}图片加载后；18脚本

3、用定位先将页面行填满，因为行的top位置都是一样的，然后用数组记录每一列的总高度。

1 script type=' text/JavaScript ' 2 function flow(mh，mv){//参数mh和mv定义数据块之间的间距，MH为水平距离，mv为垂直距离//.省略上一步中的一些代码.12 for(vari=0；iliLenI) {//遍历每个数据块，记录数组13lenarr.push中的高度(李[I]。右偏)；14 } 1516 varoarr=[]；17 for(vari=0；IC；I) {//排列行，记录数据oar18li [I]中各列的高度。风格。top=' 019li[I]. style . left=iw * I ' px '；20li[I]. style . opacity=' 1 '；21li[i]。style['-moz-opacity ']=' 1 '；22li[i]。style['filter']='alpha(不透明度=100)'；23 arr . push(lenArr[I])；24 } 25 document . GetElementbyID(' load img '). style . top=_ GetMaxVaLue(oArr)50 ' px '；//将加载移动到下面的26}27//执行28窗口。onload=function () {flow (10，10)}图片加载后；29//获取数字数组30 function _ getmaxvalue(arr){ 31 vara=arr[0]的更大值；32 for(var kinar){ 33 if(arr[k]a){ 34a=arr[k]；35 } 36 } 37returna38 } 39脚本