原生js简易瀑布流无限加载效果

最新推荐文章于 2023-09-26 16:25:47 发布

我有没有心思

最新推荐文章于 2023-09-26 16:25:47 发布

阅读量196

点赞数 2

文章标签： javascript css html Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73500412/article/details/129626285

版权

html部分

<div class="pull">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
</div>

css部分

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        body {
            /* 防止body塌陷 */
            padding: 1px;
            /* height: 3000px; */
        }

        .pull {
            width: 1200px;
            margin: 100px auto;
        }

        .pull>ul {
            float: left;
            width: 22%;
            margin-right: 4%;
        }

        .pull>ul:last-child {
            margin-right: 0;
        }

        .pull>ul>li {
            font-size: 35px;
            text-align: center;
            color: #fff;
        }
</style>

js部分

<script>
        // 1.进入页面，生成一行颜色块
        // 滚动条距离底部 = 内容高度(scrollHeight) - 可视区高度(clientHeight)
        var bodyEle = document.body;
        var htmlEle = document.documentElement;
        var count = 0;
        var uls = document.querySelectorAll('.pull>ul');
        // console.log(bodyEle.scrollHeight, htmlEle.clientHeight);
        while (bodyEle.scrollHeight - htmlEle.clientHeight < 200) {
            create();
        }
        // 2.滚动时，生成一行颜色块
        // 距离底部 < 100
        // 距离底部 = 内容高度 - 可视区高度 - 滚动距离
        window.onscroll = function () {
            if (bodyEle.scrollHeight - htmlEle.clientHeight - window.pageYOffset < 100) {
                create();
            }
        }
        // 创建一行颜色块
        function create() {
            for (var i = 0; i < 4; i++) {
                var li = document.createElement('li');
                // li.style.backgroundColor = 'red';
                // li.style.height = '100px';
                // li.style.lineHeight = '100px';
                var h = random(230, 260, 5);
                li.style.cssText = `
                    height: ${h}px;
                    line-height: ${h}px;
                    background-color: rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)});
                `
                li.innerHTML = ++count;
                // 追加到内容高度最小的ul中
                getMinul().append(li);
            }
        }
        // 获取高度最小的ul
        function getMinul() {
            var minIndex = 0; // 用于保存高度最小的ul对应的下标
            uls.forEach((item, index) => {
                // console.log(item, index);
                if (item.scrollHeight < uls[minIndex].scrollHeight) {
                    minIndex = index;
                }
            })
            return uls[minIndex];
        }
        // 获取随机数
        function random(min, max, n = 1) {
            // return Math.floor(Math.random() * (max - min + 1)) + min;
            return Math.floor(Math.random() * (max - min + 1) / n) * n + min;
        }
 </script>