-
瀑布流也称瀑布流布局，它是一种流行的网页布局。其视觉性能参差不齐，多列布局。当页面滚动条向下滚动时，布局将加载数据块并添加到当前尾部。
看看下面的代码，你如何使用纯CSS3见效果！
HTML
这里有一个大盒子，里面装着所有的东西。小盒子包装好了，图片框在图片中。看看CSS的代码。
CSS
* {
保证金：0；
填充：0；
}
#所有{
密钥代码
WebKit的列宽度：437px；
-moz柱宽度：437px；
- o-column-width：437px；
MS柱宽度：437px；
/ * WebKit的列数：3；
-moz列数：3；
- o-column-count：3；
3×MS列计数：；
/ * WebKit列规则：2px冲# F00；
-moz列规则：2px冲# F00；
- o-column-rule：2px冲# F00；
MS柱规则：2px冲* # F00；
/ * WebKit柱间隙：5px；
-moz柱间隙：5px；
- o-column-gap：5px；
MS柱间隙：* 5px；
}
箱{。
填充物：00 15px 15px；
}
PIC {。
填料：10px；
边境：1px solid # CCC；
边界半径：5px；
盒子的影子：00 5px # CCC；
宽度：400px；
}
PIC > img {。
宽度：400px；
高度：自动；
}
效果出来了
CSS3可以看到瀑布，但这幅画看起来怪怪的，左和右之间的空间不够灵活。随着浏览器窗口大小的改变列宽度，用户体验不好，根据垂直序列的画种，破坏画面的显示顺序，图片，或依靠Javaｓｃｒｉｐｔ来实现。唯一的优点是不需要计算，浏览器会自动计算，只需设置栏宽、高性能。
为了得到更好的效果，所以我们还是用算法来做，下面的jQuery代码结合css来实现瀑布。
CSS
* {
保证金：0；
填充：0；
}
#所有{
职位：相对；
}
箱{。
填充物：00 15px 15px；
浮点数：左；
}
PIC {。
填料：10px；
边境：1px solid # CCC；
边界半径：5px；
盒子的影子：00 5px # CCC；
}
PIC > img {。
宽度：400px；
高度：自动；
}
滑动分页
$（窗口）加载（函数（）{）
瀑布（）；
无功/ dataint = {数据：{ {src：车 / 1。jpg}，{src：车 / 2。jpg}，{src：车 / 3 jpg}，{src：车 / 4。jpg} } }
窗口（函数（））{
如果（checkscrollslide）{ / /
/ /美元。每个（dataint.data，功能（键，值）{
无功/ obox = $（节点）（框）。AppendTo（$（# ））；
无功/ OPIC = $（节点）（PIC）。AppendTo（$（obox））；
无功/ oimg = $（。属性）（src$（价值）。Attr（SRC））。AppendTo（$（OPIC））；
}
（瀑布）；
}
}
}）
函数瀑布（）{
var =美元美元箱（#所有> div）；
boxs.eq功W = $（0）OuterWidth（）；
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）；
/ / console.log（明）；
$（value）Css（{
位置：将，
顶：胡志明+ 'px，
左：minhindex×宽+ 'px
}）
Harr { minhindex } = boxs.eq美元（指数）的OuterHeight（）；
}
}）；
}
/ /功能checkscrollslide（）{
Var / $lastBox=$(#all>div) (.Last);
Var（前+数学。楼）/ lastboxdis = lastbox.offset美元（美元lastbox。网页）（/ 2）；
无功/ scrollTop = $（窗口）（。scrollTop）；
无功/ documenth = $（窗口）（的高度）；
/ /返回（lastboxdis < scrollTop + documenth）真的假的；
/