css瀑布流以及图片懒加载

最新推荐文章于 2024-05-19 13:47:41 发布

xiaobai_qxjn

最新推荐文章于 2024-05-19 13:47:41 发布

阅读量249

点赞数 1

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/xiaobai_qxjn/article/details/130636219

版权

css瀑布流以及图片懒加载

一、效果展示

思路：当滚动条往下拉时，图片元素与视口交互时，便请求图片地址
在这里插入图片描述

二、相应的代码部分

1.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>
</head>

<body>
    <div class="body">
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic1.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic2.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic3.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic4.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic5.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic1.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic2.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic3.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic4.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic5.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic1.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic2.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic3.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic4.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic5.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic1.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic2.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic3.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic4.jpeg">
        </div>
        <div class="image">
            <img src="./images/empty.jpg" alt="" data-src="./images/pic5.jpeg">
        </div>
    </div>
</body>

</html>

2.css

* {
    margin: 0;
    padding: 0;
    background-color: beige;
}

.body {
    margin: auto;
    width: 60%;
    height: 100vh;
    padding: 30px;
    /* display: flex;
    flex-direction: row;
    flex-wrap: wrap; */
    display: grid;
    /* 
    grid-template-columns:repeat(4,1fr); // 列宽度平均分成四等份 
    grid-template-columns:1fr 2fr 3fr;   // 列宽这样是分成6份各占 1 2 3 份 效果如下图 
    */
    grid-template-columns: repeat(3, 1fr);
    /* 显示的子元素之间的间距 */
    grid-gap: 20px;
    /* 网格子元素的换行  row dense:指换行时留下的空间由下面的元素填补上去 */
    grid-auto-flow: row dense;
    /* 网格子元素中的水平，垂直排列方向 可支持一下*/
    /* 
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;   //水平方向
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;     // 垂直方向
    */
    justify-items: center;
    align-items: center;
    /* 瀑布流的关键：给横向添加属性 仅支持火狐*/
    /* grid-template-rows: masonry; */
}

.image {
    /* width: 100%; */
    width: 300px;
    height: 300px;
    display: block;
}

.image img {
    width: 100%;
    height: 100%;
}

3.js

// 实现按需加载操作，
const ob = new IntersectionObserver(
    (entries) => { // 这里监听的所有图片会放在这个带有所有信息的 entries的数组里面,主要看isIntersecting：指交叉的位置；target:类型
        var num = 0; // 可以通过按需加载的方式去请求
        console.log(entries);
        for (const entry of entries) {
            // console.log("有没有跟视口交叉", entry.isIntersecting);
            if (entry.isIntersecting) {
                num += 1
                console.log("元素出现在视口，并出现交叉");
                const img = entry.target
                img.src = img.dataset.src
                ob.unobserve(img)
            }
        }
        console.log("要请求", num);
    }, {
        threshold: 0, // 0-1 :子元素到视口的边~到完全占据
        // root: '' ,//填写它的父级元素还是祖父元素，默认为null 即视口
        // rootMargin: -20, //  指视口扩大范围还是缩小范围，让子元素交叉的部分变大或者缩小
    }
)
// 获取所有的图片列表
const imgs = document.querySelectorAll("img[data-src]") // 直接获取 data-src下的位置
imgs.forEach((img_div) => {
    // console.log(img_div);
    ob.observe(img_div)
})