实现图片懒加载和图片瀑布流的前端技巧

在现代网页设计中，优化图像加载以提高性能是至关重要的。同时，图片瀑布流布局也已经成为许多网站的设计趋势之一。本文将介绍如何使用HTML、CSS和JavaScript实现图片懒加载和图片瀑布流

图片懒加载

图片懒加载是一种技术，它延迟加载页面上的图像，直到它们进入用户的视野范围。这有助于减少初始页面加载时间和带宽消耗。

HTML 结构

首先，我们创建一个简单的HTML结构，包含需要懒加载的图像：

<div id="image-container">
        <img data-src="image1.jpg" alt="Image 1">
        <img data-src="image2.jpg" alt="Image 2">
        <!-- 添加更多图像 -->
    </div>

这里我们 不是用到img的src属性，这里是用到了data-src属性来实现存储图像的URL，而不是src属性

css样式

添加样式来控制图像容器的尺寸和外观：

#image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}
#image-container img {
    width: 300px;
    margin: 10px;
}

JavaScript代码

接着用JavaScript代码来实现图片的懒加载

 //当文档的DOM内容加载完成后，执行回调函数中的代码。
        document.addEventListener("DOMContentLoaded", function () {
            // 获取所有位于#image - container下的img元素，并将其存储在images变量中。
            var images = document.querySelectorAll("#image-container img");
            // 定义一个函数lazyLoad，用于检查图像是否在视野中，并将data - src属性的值设置为src属性的值，从而触发图像加载
            function lazyLoad() {
                images.forEach(img => {
                    if (inspect(img) && !img.getAttribute("src")) {
                        img.setAttribute("src", img.getAttribute("data-src"));
                    }
                });
            }
            // ：定义一个函数inspect，用于检查元素是否在视窗内。通过获取元素的位置信息，判断元素的上、左、下、右边界是否在视窗范围内。
            function inspect(element) {
                var rect = element.getBoundingClientRect();
                return (
                    rect.top >= 0 &&
                    rect.left >= 0 &&
                    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
                );
            }

            // 在页面加载时调用lazyLoad函数，初始化图像的懒加载
            lazyLoad();

            // 添加滚动事件监听器，当页面滚动时，调用lazyLoad函数，检查图像是否在视窗内。
            window.addEventListener("scroll", lazyLoad);
        });

此代码会检查图像是否在视野中，如果是，则将data-src属性的值设置为src属性的值，从而触发图像加载

图片瀑布流

图片瀑布流是一种动态网格布局，图像按照列的高度自动排列，创建出独特的视觉效果

HTML 结构

创建一个简单的HTML结构来容纳图片瀑布流：

<div id="masonry-container">
    <div class="column">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="column">
        <img src="image3.jpg" alt="Image 3">
        <img src="image4.jpg" alt="Image 4">
    </div>
</div>

CSS 样式

为图像容器和列添加样式，以创建瀑布流布局：

#masonry-container {
    display: flex;
    justify-content: space-between;
}

.column {
    flex: 1;
    margin-right: 10px;
}

.column img {
    width: 100%;
    margin-bottom: 10px;
}

JavaScript 代码

使用JavaScript代码实现瀑布流布局：

window.addEventListener("load", function() {
    const columns = document.querySelectorAll(".column");
    
    function adjustColumns() {
        columns.forEach(column => {
            let columnHeight = 0;
            const images = column.querySelectorAll("img");
            images.forEach(img => {
                columnHeight += img.clientHeight;
            });
            column.style.height = columnHeight + "px";
        });
    }

    // 初始化布局
    adjustColumns();

    // 监听图像加载事件以适应布局
    window.addEventListener("resize", adjustColumns);
});

在页面加载时自动调整列的高度，以创建瀑布流效果，并在窗口大小改变时进行调整