JavaScript实现瀑布流布局

在一些购物类网站上会看到一种诸如下图的类似瀑布流布局，这种布局的一个特点是每一个盒子的宽度相同，而高度却是任意的。

<div class="pic-box">
<div class="pic">
<img src="img/1.jpg" alt="1">
</div>
</div>

通过一个div.pic-box盒子来控制每个元素之间的间隔，div.pic来给元素添加边框效果。由于后面div.pic-box需要绝对定位，所以给它的父元素一个position: relative;属性。每个img的宽度设置为200px；

js脚本的编写主要有几个思路：

1. 每一列排列的元素个数随浏览器宽度改变而改变

2. 先将第一排元素排列好，然后后面的元素找前面高度最小的那一列插进去

注意： 每次将元素插进去的时候需要更新每一列高度值得数组

function waterfall(parent,box){
let oParent = document.getElementById(parent);
let oBoxs = oParent.getElementsByClassName(box);
let boxWidth = oBoxs[0].offsetWidth;
let screenWidth = document.body.clientWidth || document.documentElement.Width;
let cols = Math.floor(screenWidth/boxWidth);//每一排有多少列
oParent.style.width = boxWidth * cols + 'px';
oParent.style.margin = '0 auto';
let aBoxHeight = [];
//第一排的照片正常排列，第二排开始每一张照片找到上一排照片最短高度的地方插入
for(let i = 0,lens = oBoxs.length;i < lens;i++){
if(i < cols){
aBoxHeight.push(oBoxs[i].offsetHeight);
}else {
let minHeight = Math.min.apply(null,aBoxHeight);
let index = getIndex(aBoxHeight,minHeight);
oBoxs[i].style.position = "absolute";
oBoxs[i].style.top = aBoxHeight[index] +"px";
oBoxs[i].style.left = oBoxs[index].offsetLeft + "px";
aBoxHeight[index] += oBoxs[i].offsetHeight;
}
}
}
function getIndex(arr,val){
for(let i = 0,lens = arr.length;i < lens;i++){
if(arr[i] === val){
return i;
}
}
}

这样就实现了瀑布流的布局，如果还要实现往先滚动实时加载图片，还需要添加一个滚动事件的监听。

let data = [{"src":"img/1.jpg"},{"src":"img/22.jpg"},{"src":"img/13.jpg"},{"src":"img/14.jpg"},{"src":"img/5.jpg"},{"src":"img/16.jpg"}];
//添加滚动监听函数，自动加载图片
window.addEventListener("scroll",function(event){
if(checkScroll("container","pic-box")){
for(let i = 0,lens = data.length;i < lens;i++){
let box = document.createElement("div");
box.className = "pic-box";
let pic = document.createElement("div");
pic.className = "pic";
let img = document.createElement("img");
img.src = data[i].src;
img.alt = i;
pic.appendChild(img);
box.appendChild(pic);
document.getElementById("container").appendChild(box);
waterfall("container","pic-box");
}
}
});

function checkScroll(parent,box){
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
let screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
let oParent = document.getElementById(parent);
let oBoxs = oParent.getElementsByClassName(box);
let lastBox = oBoxs[oBoxs.length - 1];
let offset = lastBox.offsetTop + Math.floor(lastBox.offsetHeight/2);
return offset > scrollTop + screenHeight? false : true;
}

当最后一个元素的一半高度都通过了浏览器底部的时候，会自动加载新的图片进来。