js面向对象实现瀑布流
2021-02-07 15:17
阅读：622
YPE >
标签：let mini || nbsp name hang alt scrolltop atd
html>
div {
width: 200px;
position: absolute;
}
class waterfall {
creatDiv() {
for (let i = 0; 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
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
if (a[i]
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()
js面向对象实现瀑布流
标签：let mini || nbsp name hang alt scrolltop atd
原文地址：https://www.cnblogs.com/bwnnxxx123/p/13089754.html
评论
亲，登录后才可以留言！