页面中 “瀑布流布局” 的实现

程序员玫玫

于 2024-09-21 12:03:43 发布

阅读量735

点赞数 15

文章标签： react.js 前端前端框架 javascript 面试

本文链接：https://blog.csdn.net/2401_86113453/article/details/142414491

版权

如何在页面中实现瀑布流布局

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

文末有已成功帮助500多人拿到前端offer的文章！！

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
}