jQuery实现瀑布流布局
HTML复制代码代码如下所示：
CSS
复制代码代码如下所示：
{ *
保证金：0；
填充：0；
}
{ #主要
职位：相对；
}
{。箱
填充物：00 15px 15px；
浮点数：左；
}
{。PIC
填料：10px；
边境：1px solid # CCC；
边界半径：5px；
盒子的影子：0px 0px 5px # CCC；
{ IMG
宽度：165px；
高度：自动；
}
}
Javaｓｃｒｉｐｔ
复制代码代码如下所示：
$（窗口）。
瀑布（）；
无功dataint = {数据：{ {src：7。jpg}，{src：8。jpg}，{src：9。jpg}，{src ：6。jpg} } }
JSON数据模拟；
$（窗口）。
如果（checkscrollslide）{
美元。每个（dataint.data，功能（键，值）{
无功obox = $（）。AddClass（框）。AppendTo（$（#主））；
jQuery支持是连续的、隐式迭代；
OPIC = $（var ），AddClass（'pic）。AppendTo（$（obox））；
$（。属性）（src
}）；
瀑布（）；
}
}）
}）；
主要功能/流量布局；
函数瀑布（）{
var =美元美元箱（#主要> div）；
/ /直接访问子#主要元素的div.box元下；
获取每列的宽度；
boxs.eq功W = $（0）OuterWidth（）；
/ /边界的高度与宽度（）获取包含填充和边框的宽度；
/ /无功W = boxs.eq美元（0）。Width（）；
宽度（）只能得到元素定义的宽度；
var列= math.floor（$（窗口），Width（）/ W）；
获取多少列；
$（#主）。Width（W *列）。Css（边缘
/ /设置#主要元素的宽度和中心的风格；
VaR Harr = { }；
设置每个列的高度；
boxs.each美元（函数（指数值）{
通过每个框元素；
为了在所有元素之前找到最低的，然后将元素设置为最低点；
var = boxs.eq美元（指数）的OuterHeight（）；
盒子中的所有元素，
如果（指数＜cols）{
Harr { } = h指数；
确保第一个元素高度的每个列；
别的{ }
var胡志明= math.min.apply（null，Harr）；
离开数组的最小高度很高；
无功minhindex =美元。内部数组（Minh，Harr）；
/ /美元。内部数组（）方法给出了该元素的索引值（Minh）的阵列（哈尔）；
/ / console.log（价值）；
此时此值是DOM对象第一行之后的所有盒元素！；
$（value）Css（{
$（$）：将DOM对象转换为jQuery对象，您可以继续使用jQuery方法；
位置：绝对
顶部
左：minhindex×宽+PX
}）；
Harr { minhindex } = boxs.eq美元（指数）的OuterHeight（）；
高+元素只添加到一个新的高列中的元素的最小高度=最小高度；
}；
}）；
/ / console.log（哈尔）；
}；
功能checkscrollslide（）{
lastbox = $（var $ #主要> div）最后的（）；
无功lastboxdis = lastbox.offset美元（）。顶+ math.floor（$ lastbox.outerheight（） / 2）；
VaR scrollTop = $（窗口）ScrollTop（）；
无功documenth = $（窗口）Height（）；
返回（lastboxdis < scrollTop + documenth）真的假的；
}
详细解释详细的参考资料，我不会再把它拿出来了。