关于网页布局瀑布流原理浅析

瀑布流布局

瀑布流布局常用于对不同高度的图片元素按照高度进行绝对定位，保持每列图片的高度大致相同的高度。

瀑布流布局原理：瀑布流布局中元素的宽和间距保持一致，但是高度不同。
程序需要再等待图片元素加载完成以后开始对元素进行绝对定位。首行元素的定位的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