js实现图片懒加载，屏幕自适应

最新推荐文章于 2024-03-10 16:52:40 发布

不归少年

最新推荐文章于 2024-03-10 16:52:40 发布

阅读量1k

点赞数

分类专栏： javascript 面试

本文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/99178639

版权

javascript 同时被 2 个专栏收录

38 篇文章 1 订阅

订阅专栏

面试

17 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述
屏幕小于1000px时

代码

<!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>瀑布流</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #ededed;
        }

        .content {
            width: 1090px;
            height: auto;
            margin: auto;
            background-color: rgb(236, 238, 231);
            position: relative;
            /* border: solid 1px black; */
        }

        img {
            width: 100px;
            box-shadow: 0 0 5px grey;
            position: absolute;
        }
    </style>
</head>
<body>
    <script>
        var img = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg",
            "12.jpg", "13.jpg", "14.jpg", "15.jpg"
        ];
        //每次加载50张图片
        var num = 50;
        //每行加载的数量 默认一行10张图片
        var hrow = 10;
        //标记当前瀑布流高
        var max = 0;
        
        var content = document.createElement("div");
        content.className = "content";
        document.body.appendChild(content);
        var small = document.getElementsByClassName("smallimg");
        // 数组，存放图片对象
        var lists = [];
        createImages();
        //随机生成50张图片、图片水平位置
        function createImages() {
            for (var i = 0; i < num; i++) {
                var imglist = document.createElement("img");
                imglist.className = "smallimg";
                imglist.src = "images/" + img[Math.floor(Math.random() * img.length)];
                //left
                imglist.style.left = i % hrow * 100 + i % hrow * 10 + "px";
                content.appendChild(imglist);
                lists.push(imglist);
            }
        }
        //屏幕大小变化时
        window.onresize = function () {
        //可视宽
            var sw = document.documentElement.clientWidth;
            if (sw < 1000) {
                hrow = 5;
                content.style.width = "540px";
                //屏幕大小一旦小于1000，就固定在当前加载状态，图片不随着页面的变化而随机变化
                //this.οnresize=null;
            } else {
                hrow = 10;
                //在屏幕大小变化的时候，content一直居中   行内样式优先级高于内嵌样式，设置行内样式，使content拥有宽，从而使margin：auto其作用
                content.style.width="1090px";
            }
            //清空当前内容
            content.innerHTML = "";
            //重新加载
            createImages();
            setOffsetT(0);
        }
        
        window.onload = function () {
            setOffsetT(0);
            //绑定一个滚动事件
            this.addEventListener("scroll", function (e) {
                if (this.scrollY + document.documentElement.clientHeight >= document.body.offsetHeight -
                    20) {
                    createImages();
                    setOffsetT(lists.length - num);
                }
            })
        }
        function setOffsetT(start) {
            for (var i = start; i < lists.length;i++) {
                //top
                var offsettop = i >= hrow ? lists[i - hrow].offsetHeight + lists[i - hrow].offsetTop + 10 : 0;
               lists[i].style.top = offsettop + "px";
                if (max < offsettop + lists[i].offsetHeight) {
                    max = offsettop + lists[i].offsetHeight;
                }
            }
            content.style.height = max + "px";
        }
    </script>
</body>

</html>

不归少年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现图片懒加载，屏幕自适应

效果图屏幕小于1000px时代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
复制链接

扫一扫