瀑布流布局
瀑布流布局常用于对不同高度的图片元素按照高度进行绝对定位,保持每列图片的高度大致相同的高度。
瀑布流布局原理:瀑布流布局中元素的宽和间距保持一致,但是高度不同。
程序需要再等待图片元素加载完成以后开始对元素进行绝对定位。首行元素的定位的top,left值从0,0开始。每列元素的left = (index%col) * width + index * space,其中index指元素是第几列,col是布局的总列数,width是每列的宽度,space是每列的间距。每行元素的top = item[index - col].top + item[index - col].height + space,对应元素的top值等于上面元素的top值加上上面元素的高度再加上行间距。
瀑布流布局样图
//css设置
.container {
position: relative;
}
.container-item {
position: absolute;
}
function waterFall(container, col, space, dataArr) {
//container是父盒子,col为展示的列数,space为元素间距,dataArr为src数据来源
var leftValList = []; //记录每列的left定位值
var topValList = []; //记录对应列的top值
var leftVal = 0;
var topVal = 0;
var tot