day23
瀑布流结构
<!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>
.box {
position: relative;
left: 100px;
}
.box>div {
position: absolute;
width: 240px;
}
img {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div><img src="./img/1.jpg"></div>
<div><img src="./img/2.jpg"></div>
<div><img src="./img/3.jpg"></div>
<div><img src="./img/4.jpg"></div>
<div><img src="./img/5.jpg"></div>
<div><img src="./img/6.jpg"></div>
<div><img src="./img/7.jpg"></div>
<div><img src="./img/1.jpg"></div>
<div><img src="./img/2.jpg"></div>
<div><img src="./img/3.jpg"></div>
<div><img src="./img/1.jpg"></div>
<div><img src="./img/2.jpg"></div>
<div><img src="./img/3.jpg"></div>
<div><img src="./img/4.jpg"></div>
<div><img src="./img/5.jpg"></div>
<div><img src="./img/6.jpg"></div>
<div><img src="./img/7.jpg"></div>
<div><img src="./img/1.jpg"></div>
<div><img src="./img/2.jpg"></div>
<div><img src="./img/3.jpg"></div>
</div>
<script>
window.onload = function () {
var data = ["./img/4.jpg", "./img/5.jpg", "./img/6.jpg", "./img/7.jpg"]
var oBox = document.querySelector(".box")
var oDiv = oBox.getElementsByTagName("div")
var mg = 20
var perWidth = oDiv[0].offsetWidth + mg;
var col = parseInt(oBox.offsetWidth / perWidth)
var getwid = [];
for (i = 0; i < col; i++) {
oDiv[i].style.top = 0;
oDiv[i].style.left = perWidth * i + "px";
getwid.push(oDiv[i].offsetHeight)
}
//找最小值得索引
function getminindex(arr) {
var min = 0
for (i = 1; i < arr.length; i++) {
if (arr[min] > arr[i]) {
min = i
}
}
return [min, arr[min]]
}
//把剩余得div依次放到最小值索引得下面
function lastdiv(num) {
for (var i = num; i < oDiv.length; i++) {
var mmin = getminindex(getwid)
oDiv[i].style.top = mmin[1] + mg + "px";
oDiv[i].style.left = oDiv[mmin[0]].style.left;
getwid[mmin[0]] += oDiv[i].offsetHeight + mg
}
}
lastdiv(col)
//根据滑轮滚动的距离添加div
window.onscroll = function () {
var disscroll = document.documentElement.scrollTop
var dispage = document.documentElement.clientHeight
if (disscroll >= getminindex(getwid)[1] - dispage) {
data.forEach(function (e) {
var odiv = document.createElement("div")
odiv.innerHTML = "<img src='" + e + "'>"
oBox.appendChild(odiv);
});
var oDiv = oBox.querySelectorAll("div")
lastdiv(oDiv.length - data.length)
}
}
}
</script>
</script>
</body>
</html>
