瀑布流 + 图片懒加载

最新推荐文章于 2024-08-03 05:52:51 发布

遇见 - 怣

最新推荐文章于 2024-08-03 05:52:51 发布

阅读量197

点赞数

分类专栏：知识总结笔记文章标签： javascript 前端 html css3

本文链接：https://blog.csdn.net/m0_49378755/article/details/127331048

版权

知识总结同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

笔记

10 篇文章 0 订阅

订阅专栏

css/css.css

* {
    margin: 0;
    padding: 0;
}
body {
    padding: 10px;
}
#main {
    position: relative;
    left: 0;
    top: 0;
}
#main::after {
    content: "";
    display: block;
    clear: both;
}
.divImg {
    width: 210px;
    padding: 6px;
    float: left;
    position: absolute;
}
.divImg>img {
    width: 100%;
}

js/js.js

window.onload = function () {

    (function (lazyAttributeName, loadImgName) {
        let Images = document.getElementsByClassName("divImg")   //全部放img的div节点
        let main = document.getElementById("main")                // 最外层节点
        // 瀑布流
        function PuBuLiu() {
            let WEIGHT = document.body.clientWidth     // 网页宽度
            let imgWeight = Images[0].offsetWidth                    // 得到图片的宽度
            let rowSize = Math.floor(WEIGHT / imgWeight)            // 计算出一行显示几个
            let heightTop = []                                      // 用来保存每列的累积高度
            // 循环图片div
            for (let i = 0; i < Images.length; i++) {
                //用来判断是否是第一行
                if (i < rowSize) {
                    heightTop[i] = Images[i].offsetHeight        // 将当前图片高度存到数组
                    Images[i].style.left = i * imgWeight + "px";      // 设置图片位置
                    Images[i].style.top = "0px";
                } else {
                    let min = Math.min(...heightTop)                // 找寻每列的最小高度
                    let key = heightTop.indexOf(min)                // 找到最小值所在列数

                    Images[i].style.left = key * imgWeight + "px";     //设置位置
                    Images[i].style.top = heightTop[key] + "px";
                    heightTop[key] += Images[i].offsetHeight          // 将当前图片的高度累加到当前列的总高度
                }
            }
            main.style.height = Math.max(...heightTop) + "px"      // 设置放图片div的容器高度           
        }

        PuBuLiu()       //打开浏览器运行一次

        // 懒加载
        function LJZ() {
            let shikou = document.documentElement.clientHeight;       //浏览器可视高度
            let tiao = document.documentElement.scrollTop || document.body.scrollTop        //滚动条距离顶部的距离
            for (let j = 0; j < Images.length; j++) {
                if (Images[j].offsetTop < shikou + tiao) {          //判断当前图片容器距离顶部的距离是否在可视区域内
                    let imgDom = Images[j].querySelector("img")       // 得到改图片容器div 中的 img
                    if (imgDom.getAttribute("src") == loadImgName) {          //   判断当前的src 是否是加载图片
                        setTimeout(() => {
                            imgDom.src = imgDom.getAttribute(lazyAttributeName)        // 将加载图片更换为真实图片src
                        }, 600)
                        imgDom.onload = function () {   //图片记载完成后调用该方法
                            PuBuLiu()          // 图片加载完成后更新一下图片位置信息
                        }
                    }
                }
            }
        }

        LJZ()

        window.onscroll = LJZ        // 滚动滚轮触发

        window.onresize = FanDou(function () {      // 浏览器大小变化是调用
            PuBuLiu()               // 更新位置
            LJZ()                   // 更新图片src信息
        }, 300)

        // 防抖
        function FanDou(fn, delay) {
            let time = null;

            return function () {
                if (time != null) {
                    clearTimeout(time)
                }
                time = setTimeout(() => {
                    fn.call(this)
                }, delay)
            }
        }

    })("data-src", "./img/load.jpg")      // 传入两个值 第一个是真实图片地址存放的属性名  第二个是加载图片地址

}

index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <link rel="stylesheet" href="css/css.css">
    <script src="./js/js.js"></script>
</head>

<body>
    <div id="main">
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/1.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/2.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/3.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/4.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/5.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/6.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/7.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/8.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/9.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/10.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/11.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/12.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/13.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/14.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/15.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/16.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/17.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/18.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/19.jpg" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/20.png" alt=""></div>
        <div class="divImg"><img src="./img/load.jpg" data-src="./img/21.png" alt=""></div>
    </div>

    <script>

    </script>
</body>

</html>