JS瀑布流懒加载案例

代码附上：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>fall_out</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }
        </style>
    </head>

    <body>
        <ul></ul>
        <script>
            var ul, img;
            // 创建容器
            const count = 5;//总列数
            var arr = [];//存放高度之后用来比较
            var pic = 1;//图片索引
            init();//入口函数

            function init() {
                ul = document.querySelector("ul");//获取ul
                for (var i = 0; i < count; i++) {//根据count创建li
                    var li = document.createElement("li");
                    ul.appendChild(li);
                    //设置样式
                    li.style.margin = "5px";
                    li.style.width = (document.documentElement.clientWidth) / count - 22 + "px";
                    li.style.border = "1px solid lightcoral";
                    li.style.float = "left";
                    arr.push(0);//初始化第一排图片的高
                }
                //新建第一张图片
                img = new Image();
                img.src = "img/" + pic + ".jpg";
                img.addEventListener("load", addPic);//添加加载事件
                document.addEventListener("scroll", move);//给右侧滚轮添加滚轮事件
            }

            function addPic(e) {
                // 复制第一张图片
                var copy = this.cloneNode(false);
                var min = Math.min.apply(null, arr);
                var index = arr.indexOf(min);//寻找高度最小的图片
                ul.children[index].appendChild(copy);//将图片加载到ul的高度最小的li中
                copy.style.width = "100%";
                arr[index] = copy.parentElement.offsetHeight;//将高度添加到数组的该项
                if ((document.documentElement.scrollHeight - document.documentElement.scrollTop) / document.documentElement
                    .clientHeight > 4) {//当右边滚轮到达屏幕高度四倍时跳出函数
                    return;
                }
                pic = parseInt(Math.random() * 10 + 1);//否则继续加载图片
                img.src = "img/" + pic + ".jpg";
            }

            function move(e) {//当文档高度减滚动条的位置小于屏幕两倍时，继续加载
                if ((document.documentElement.scrollHeight - document.documentElement.scrollTop) / document.documentElement
                    .clientHeight < 2) {
                    pic = parseInt(Math.random() * 10 + 1);
                    img.src = "img/" + pic + ".jpg";
                }
            }
        </script>
    </body>

</html>

 

posted @   阿宇的编程之旅  阅读(461)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示