<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
position: absolute;
}
</style>
</head>
<body>
</body>
</html>
<script>
class waterfall {
creatDiv() {
for (let i = 0; i < 14; i++) {//循环图片
let odiv = document.createElement("div");//创建div
let rad = Math.round(Math.random() * 300 + 50);//取50-350之间的随机数
odiv.style.height = rad + "px";//给div设置随机高度
odiv.style.backgroundImage = "url(./img/" + i + ".jpg)";//给div设置图片背景
odiv.style.backgroundSize = "200px " + rad + "px";//给div的背景图设置大小（如：200px 330px）
odiv.style.left = odiv.offsetWidth + 10 + "px";//设置每个div的宽度加间隔
document.body.appendChild(odiv);//将创建的div加到body中
this.change();//创建的同时执行change();
}
}
change() {
let odiv = document.querySelectorAll("div");//得到所有的div
let n = Math.floor(window.innerWidth / 210);//判断一行可以放几个div
let arrH = [];//创建空数组用来装第一行的高度
for (let i = 0; i < odiv.length; i++) {//循环每个div
if (n == arrH.length) {//第一行之外的
let minIndex = this.minIndex(arrH);//找到数组中最小值的索引
odiv[i].style.left = minIndex * 210 + "px";//将div加在最小高度div的下面
odiv[i].style.top = arrH[minIndex] + 10 + "px";//将div加在最小高度div的下面
arrH[minIndex] += odiv[i].offsetHeight;//将每次加的最小div的高度累加
} else {//判断第一行，将前六个的div高度加在数组中
odiv[i].style.top = 0 + "px";//第一行div的Top
odiv[i].style.left = i * 210 + "px";//第一行div的left
arrH[i] = odiv[i].offsetHeight;//数组前六个为前6个div的高度
}
}
}
minIndex(a) {//找数组中的最小值
let minIndex = 0
for (let i = 0; i < a.length; i++) {
if (a[i] < a[minIndex]) {
minIndex = i;
}
}
return minIndex;
}
onscroll() {
let that = this;
window.onscroll = function () {//鼠标滚动事件，前提是有滚动条产生时才能出发该事件
let scTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scTop > 10) {
that.creatDiv();
}
}
}
}
let wf = new waterfall();
wf.creatDiv();
wf.change();
wf.onscroll()
</script>