瀑布流布局示例

创作时间:

作者:

@小白创作中心

瀑布流布局示例

引用

CSDN

https://blog.csdn.net/weixin_47588164/article/details/142412279

随着互联网技术的不断发展，瀑布流布局因其独特的视觉效果和良好的用户体验，在网页设计中越来越受到青睐。瀑布流布局能够使图片或卡片以自然的方式排列，形成类似瀑布的效果，不仅美观而且能够有效利用屏幕空间。本文将通过一个具体的示例，详细介绍如何使用 HTML、CSS 和 JavaScript 来实现瀑布流布局，并对其中的核心技术进行详细解析。

1. 前言

瀑布流布局是一种常见的网页布局方式，通常用于展示大量图片或卡片。与传统的网格布局不同，瀑布流布局允许元素在垂直方向上自由排列，从而充分利用屏幕空间，提高用户浏览体验。像我们常用的小红书，浏览视频和文章的首页就是采用了类似瀑布流布局的设置。

2. HTML 结构

首先，我们需要构建基本的HTML结构。每个图片或卡片都将被放置在一个带有 .box 类的 <div> 中，而这些 <div> 又会被包含在一个父级容器 #container 内。这样的结构有助于后续通过 CSS 和 JavaScript 来控制每个项目的样式和位置。

<!DOCTYPE html>
<html lang="zh-Ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流布局示例</title>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./1.webp" alt="Image 1">
            </div>
        </div>
        <!-- 此处省略更多不同高度的照片 -->
    </div>
    <script src="./index.js"></script>
</body>
</html>

3. CSS 样式

接下来是设置 CSS 样式。这里我们使用了 float: left; 来让图片或卡片水平排列，同时设置了 padding 和 border 来增加美观性。为了确保所有元素都能正确显示，我们还重置了全局的 padding 和 margin。

* {
    padding: 0;
    margin: 0;
}
#container {
    position: relative;
}
.box {
    float: left;
}
.box-img {
    width: 150px;
    padding: 5px;
    border: 1px solid #2eec48;
}
img {
    width: 100%;
}

4. JavaScript 功能实现

最后，我们使用 JavaScript 来动态计算每个图片或卡片的位置，实现瀑布流效果。关键在于计算每行可以容纳多少个元素（基于屏幕宽度），然后根据这个数字调整每个元素的位置。

（1）JavaScript 逻辑

获取父容器和子元素：使用 document.getElementById 获取父容器，使用 getChildElement 获取所有子元素。
计算每行可容纳的子元素数量：通过屏幕宽度和子元素宽度计算每行能容纳的子元素数量。
初始化高度数组：用于记录每一列的高度。
遍历所有子元素：
对于前 num 个子元素，直接记录它们的高度。
对于剩余的子元素，找到当前最矮的一列，将子元素放置在该列的底部，并更新该列的高度。

（2）响应式设计

为了确保布局在不同设备上都能正常工作，我们使用 document.documentElement.clientWidth，用于获取当前文档视口的宽度，不包括垂直滚动条。这个值对于响应式设计特别有用，因为它可以帮助开发者了解用户设备的屏幕宽度，从而根据不同的屏幕尺寸调整网页布局或样式。

（3）代码示例

function imgLocation(parent, content) {
    // 获取父容器
    var cparent = document.getElementById(parent);
    // 获取所有子元素（class 为 content 的元素）
    var ccontent = getChildElement(cparent, content);
    // 获取每个子元素的宽度
    var imgWidth = ccontent[0].offsetWidth;
    // 计算每行能容纳的子元素数量
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);
    // 设置父容器的宽度，使其刚好容纳所有子元素，避免溢出。
    cparent.style.width = `${imgWidth * num}px`;
    // 初始化高度数组
    var BoxHeightArr = [];
    // 遍历所有子元素
    for (var i = 0; i < ccontent.length; i++) {
        if (i < num) {
            // 存储每一列的高度的数组
            BoxHeightArr[i] = ccontent[i].offsetHeight;
        } else {
            // 找到当前最矮的一列的高度
            var minHeight = Math.min.apply(null, BoxHeightArr);
            // 找到最矮一列的索引
            var minIndex = BoxHeightArr.indexOf(minHeight);
            // 将子元素的位置设置为绝对定位
            ccontent[i].style.position = "absolute";
            // 设置子元素的 top属性，使其位于最矮一列的底部
            ccontent[i].style.top = minHeight + "px";
            // 设置子元素的 left属性，使其水平位置与最矮一列对齐
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
            // 更新最矮一列的高度，加上当前子元素的高度
            BoxHeightArr[minIndex] += ccontent[i].offsetHeight;
        }
    }
}

function getChildElement(parent, child) {
    // 获取 parent中所有的 child
    var childArr = [];
    var allChild = parent.getElementsByTagName('*');
    // 筛选出来所有的 box
    for (var i = 0; i < allChild.length; i++) {
        if (allChild[i].className == child) {
            childArr.push(allChild[i]);
        }
    }
    return childArr;
}