jQuery实现瀑布流布局（带详细注释）
本文介绍了jQuery实现瀑布流布局的方法，供大家参考：瀑布流布局最近真的很流行，很多人和我一样想知道如何做是正确的，网上很多参考结合N边实验，今天我终于写了一个搜索，以便于更好的理解我使用jQuery（当然随着源代码执行JS的效率会更高一些，但是很多人都不是很熟练的多源JS）。
jQuery的瀑布流布局（每行代码的详细注释）-作者：刘晓帆
体、UL、李、h3 { margin: 0；padding: 0；列表样式：无；字体：黑体12px 微软雅黑；}
瀑布流布局样式
# LXF箱{位置：相对；}
# LXF盒子里{位置：绝对；背景：# FFF；边界：# solid 1px ccc；文本对齐：中心；
h3 { padding-top：8px；}
img {宽度：200px；高度：汽车；显示：块；边界：0 }
/ * CSS3动画。
李{ WebKit的过渡：all.7s ease-out.1s；-moz过渡：all.7s自在；- O转换：，缓解了；
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
图片标题
*
原理：
1。将李的所有高值放入数组中。
2。上面的第一行是0。
三.哪个李计算高度的最小值
4。把下一个李放在李下面。
* /
var = 10； /设置这里的距离
var = $（）；这里是块名称。
无功li_w =李{ 0 }。offsetwidth +缘；
The actual width / block (including spacing, here the use of source offsetWidth function, jQuery (width) is not applicable because it is unable to obtain the actual function width, such as pandding is not in the element)
功能（陆小帆）{ / /被定义为一个函数调用
var；}；数组块高度
var =文档。文档元素}。offsetwidth / li_w | 0；
宽度除以窗口的宽度/块是一行可以放几个块。
对于（var i = 0；i < li.length；i++）{ / /数里循环多次
li_h =李{我}。offsetheight； / /让每个李的高度
如果（i）n是一行中最大的LI，那么小于n是第一行。
H {我} = li_h； / /把每个里阵列。
Li.eq（我）。Css（上，0）； / /李最高价值的第一行是0
Li.eq（我）。Css（左
我的左/左坐标是我的宽度。
}
别的{
min_h = math.min.apply（null，H）； / /数组中获得最小值，最小的块高度值
Minkey = getarraykey（H，min_h）； / /指针对应最小值
H { Minkey } = li_h +边缘； / /添加一个新的高度值更新
Li.eq（我）。Css（前，min_h +利润）； / /得到李的最小高度，然后下李放下面
Li.eq（我）。Css（左，Minkey * li_w）； / /左坐标我李的宽度是我*李
}
$（H3）。Eq（我）。文本（数+我+，身高：+ li_h ）； / /块的数量和高度在H3标题对应的格挡值
}
}
对于返回数组中的操作数（例如，计算最小高度值是数组中的第一个）的使用，对应于一个值。
功能getarraykey（s，v）{为（K S）{ if（S { } = = K v）{ return K；
*你必须使用onload事件，因为图片是不装不知道高度值。
在window.onload =函数（）{陆小帆（）；}；
运行浏览器窗口时，要更改函数
window.onresize =函数（）{陆小帆（）；}；
希望本文能对大家的jQuery程序设计有所帮助。