JS仿淘宝滚动刷新简单实现

news2024/11/23 14:06:40

废话不多说，直接上代码

<!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>