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

码农巧克零

于 2024-09-21 10:21:35 发布

阅读量965

点赞数 17

分类专栏：程序员前端开发编程文章标签： javascript 开发语言 ecmascript 华为 harmonyos

本文链接：https://blog.csdn.net/weixin_47588164/article/details/142412279

版权

程序员同时被 3 个专栏收录

138 篇文章 2 订阅

订阅专栏

前端开发

138 篇文章 1 订阅

订阅专栏

编程

138 篇文章 1 订阅

订阅专栏

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

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

1. 前言

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

2. HTML 结构

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

html

代码解读

复制代码

<!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。

css

代码解读

复制代码

* { 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个子元素，直接记录它们的高度。
- 对于剩余的子元素，找到当前最矮的一列，将子元素放置在该列的底部，并更新该列的高度。