<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 24.5%;
height: 200px;
float: left;
}
.box>div {
/* background-color: pink; */
width: 80%;
height: 200px;
margin: 30px auto;
}
.box1 {
background-color: pink;
}
</style>
</head>
<body>
<!-- 最大的容器 -->
<div class="boss">
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
</div>
</body>
<script>
window.onload = function () {
let box = document.querySelectorAll(".box")
let boxDiv = document.querySelectorAll(".box>div")
window.onscroll = function () {
// 窗口高度
let windowHeight = document.documentElement.clientHeight
console.log("窗口高度", windowHeight);
// 页面高度
let documentHeight = document.documentElement.scrollHeight
console.log("页面高度", documentHeight);
// 滚动条位置
let scrollTop = document.documentElement.scrollTop
console.log("滚动条位置", scrollTop);
console.log((windowHeight + scrollTop + 2));
if ((windowHeight + scrollTop + 2) >= documentHeight) {
// console.log('页面滚动到达底部');
for (let i = 0; i < 4; i++) {
let divs = document.createElement("div")
// 随机数颜色的
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
// 高度随机
let heights = Math.floor(Math.random() * 50 + 200)
divs.style.backgroundColor = `rgb(${r},${g},${b})`
divs.style.height = heights + "px"
box[i].appendChild(divs)
}
}
}
}
</script>
</html>
以上代码可以清楚展示