先说一下什么是瀑布流布局。

就是一堆等宽不等高的数据块组成的页面，如图：

现在好多网站都采用这种瀑布流布局，如蘑菇街。美丽说等等。首先要实现它就要明白它是怎样排列的。每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。 第一行就是按顺序排列，其他的数据块都是在每一列中挑选出最低的那一列依次排进去的。

首先实现框架。

div id=' main ' div class=' box ' div class=' pic ' img src=' images/0。jpg '/div/div class=' box ' div class=' pic ' img src=' images/1。jpg '/div/div class=' box ' div class=' images/2。jpg '/div/div class=' box ' div class=' pic ' img src=' images/3。jpg '/div/div class=' pic ' img src=' images/5。jpg '/div/div class=' box ' div class=' pic ' img src=' images/6。jpg '/div/div class=' box ' div class=' pic ' img src=' images/7。jpg '/div/div class=' box ' div class=' pic ' img src=' images/8。jpg '/div/div class=' box ' div class=' pic ' img src=' images/div class=' pic ' img src=' images/11。jpg '/div/div class=' box ' div class=' pic ' img src=' images/12。jpg '/div/div class=' box ' div class=' pic ' img src=' images/14。jpg这里定义了14个图片，每个图片都被一个class=box的属性和class="pic "的属性包裹，在钢性铸铁中定义其样式：

* { padd : 0pxmargin : 0px } # main { position : relative }。box{/* display:内嵌块；*/padd : 15px 0px 0px 15px；向左浮动：} .pic { padd : 10px border-radius : 5px；border:1px固体# cccbox-shadow : 0 5px # CCC；} .pic img { width : 165 px h8 : auto }/样式效果图如下：

其实每一行六个图片不是固定的，当你缩小窗口时，它会成为两列，或者三列四列。但我们为了以后的布局，就将它设置为固定的列数，即根据窗口的大小除以图片的大小，向下取整。

接下来写的是射流研究…实现的瀑布流布局。在写代码之前，由于要用到包厢属性，而射流研究…中没有直接定义获得班级的方法，所以我们在这儿要写一个获得班级的方法：

函数getByClass(父类，类名){ var BoxArr=new Array()；//用来获取所有班级为包厢的元素oeelement=parent。getelementsbytagname(' * ')；for(var I=0；I OEElement . LengTii){ if(OEElement[I].类名==类名){ BoxArr。push(oeElement[I])；} };返回boxArr}两个参数分别是父元素和要查找的类名。

接下来写函数：

//首先调用函数窗口。onload=onload函数中的function () {waterfull ('main '，' box ')；} function water full (parent，children){//用class=box var o parent=document . getelementbyid(parent)获取父元素及其下的所有元素；var oBoxs=getByClass(oParent，children)；//如前所述，我们希望数据块中的列数保持不变。因为每个数据块具有相等的宽度，所以可以基于第一数据块的宽度来获得数据块的宽度。然后计算数据块中的列数并向下舍入。var oBoxW=oBoxs[0]。offsetWidthvar cols=math . floor(document . document element . client width/obo xw)；接下来，设置父元素的样式。我们需要得到它的宽度和中心。哦，父母。风格。CSS text=' width : ' cols * obo xw ' px；margin : 0 auto '；//定义完所有样式后，数据块就被排列好了。首先直接排第一行。定义一个数组来存储每列的高度，从第二行开始，这样每个数据块都排在高度最低的列中。首先，我们要遍历所有的盒子，也就是oboxvar arrH=[]；//定义数组中存储的每一列的高度(var I=0；i oBoxs.lengthI ){ //当是第一行时，直接依次排列数据块，如果(icols){ arrh[I]=obox[I]，则记录每一列的高度。数组中的右边；}//使用icols时，需要遍历前面所有列的高度，将下一张图片放在合适的位置。Else{ //首先找出数组中高度最低的列数。我们都知道Math.min可以找到最小的数字，但是它接受的参数必须是一组数字，所以这里我们使用了Math.min.apply()方法varminh=math.min.apply (null，arrh)；//定义一个变量来存储数组中的最小高度。//在找到最小高度之后，我们需要知道它的索引，才能为下一个数据块找到合适的位置，所以我们定义了一个函数来找到下面的最小下标。//定义一个变量，接受getminindex函数varminindex=getminindex(arrh，Minh)的返回值；//获得列数最小的索引后，可以将下一个元素放在obox[I]的适当位置。风格。位置='绝对'；obox[I]. style . top=MInh ' px '；obo xs[I]. style . left=minIndex * obo xw ' px '；//最后把当前所有的数据块放在正确的位置，但是不要忘记更新arrH数组arrH[mini dex]=obo xes[I]。偏右；} } }//获取下标函数getminindex(array，min){ for(var I in array){ if(array[I]==min)返回I；}}以上是完整瀑布流布局的js实现代码。效果图如下：

附加源代码：

Js代码：

窗户。onload=function(){ water full(' main '，' box ')；}函数waterFull(父级，子级){ var opa租金=文件。getelementbyid(父级);//var obox=parent。queryselectorall(' .方框');var oBoxs=getByClass(oParent，children)；//计算整个页面显示的列数var oBoxW=oBoxs[0].offsetWidthvar cols=数学。楼层(文件。文档元素。客户端宽度/obo xw)；//设置主要的的宽度，并且居中奥帕伦特。风格。c text=' width : ' ObOxW * cols ' px；边距： 0自动'；//找出高度最小的图片，将下一个图片放在下面//定义一个数组，存放每一列的高度，初始化存的是第一行的所有列的高度var arrH=[]；for(var I=0；I ObOxs . LengiI){ if(I cols){ arrh。推送.右偏);} else { var MInh=Math。量滴应用(null，ArrH)；var minIndex=GetMinhIndex(Arrhh，MInh)；obox[I]。风格。位置='绝对'；obox[I]。风格。top=MInh ' pxobo xs[I]。风格。left=minIndex * obo xw ' px//ObOxs[I]。风格。左=arrH[minIndex].arrH[minIndex]=oBoxs[i].偏右；} } }函数getByClass(父类，类名){ var BoxArr=new Array()；//用来获取所有班级为包厢的元素oeelement=parent。getelementsbytagname(' * ')；for(var I=0；I OEElement . LengTii){ if(OEElement[I].类名==类名){ BoxArr。push(oeElement[I])；} };返回boxArr}//获取当前最小值得下标函数getMinhIndex(数组，分钟){ for(数组中的var I){ if(数组[I]==分钟)返回我；}}html以及钢性铸铁代码：

！DOCTYPE html html hearteta charset=' utf-8 '/script src=' ./jswaterfll。js /脚本标题瀑布流布局/title style type=' text/CSS ' * { padd : 0px；margin : 0px } # main { position : relative }。box{/* display:内嵌块；*/padd : 15px 0px 0px 15px；向左浮动：} .pic { padd : 10px border-radius : 5px；border:1px固体# cccbox-shadow : 0 5px # CCC；} .pic img { width : 165 px h8 : auto }/style/headdy div id=' main ' div class=' box ' div class=' pic ' img src=' images/0。jpg '/div/div class=' box ' div class=' pic ' img src=' images/1。jpg '/div/div class=' box ' div class=' pic ' img src=' pic ' img src=' images/2。jpg '/div/div class=' box ' div class=' pic ' img src=' images/3。jpg '/div=' pic ' img src=' images/5。jpg '/div/div class=' box ' div class=' pic ' img src=' images/6。jpg '/div/div class=' box ' div class=' pic ' img src=' images/7。jpg '/div/div class=' box ' div class=' pic ' img src=' images/8。jpg '/div/div class=' box ' div class=' pic ' img src=' box ' div class=' pic ' img src=' images/11。jpg '/div/div class=' box ' div class=' pic ' img src=' images/12。jpg '/div/div class=' box ' div class=' pic ' img src=' images/13。jpg '/div/div class=' box ' div class=' pic ' img src=' images/14。jpg '/div/div class=' box ' div class=' div class=' box ' div class=' pic ' img src=' images/17。jpg '/div/div class=' box ' div class=' pic ' img src=' images/18。jpg '/div/div class=' box ' div class=' images/19。jpg '/div/div class=' box ' div class=' pic ' img src=' images/20。jpg '/div/div class=' box '以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。