前言
随着移动设备的普及和网速的提升，响应式设计已成为开发网站的必备技能。而瀑布样式布局是响应式设计中常用的一种布局方式，在移动端和桌面端都能良好适配。
本文将介绍响应式设计中的瀑布样式布局实现方法，包括原理分析、代码实现以及优化技巧，希望对前端开发者有所启发。
瀑布样式布局原理分析
瀑布样式布局是一种将内容按照列数排列的布局方式，类似于瀑布一样从上往下依次排列。
瀑布样式布局的原理是通过计算每个元素的宽度和高度，自动排列到高度最小的列中。具体实现如下：
- 确定列数和列间距。
- 遍历每一个元素，计算它的宽度和高度。
- 找到最小高度的那一列，将元素插入到该列中。
- 更新该列的高度，以便下一个元素可以插入到该列之后。
瀑布样式布局代码实现
HTML 结构
使用瀑布样式布局时，首先需要确定每一列的宽度，并将元素按照列数分组。以下是一个简单的 HTML 结构示例：
-- -------------------- ---- ------- ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ --- ------
CSS 样式
- 设置每一列的宽度和间距。
.waterfall {
display: flex;
flex-wrap: wrap;
}
.col {
width: calc(100% / 3 - 20px);
margin: 0 10px 20px;
}- 让图片自适应宽度，并设置边距。
.col img {
width: 100%;
margin-bottom: 10px;
}JavaScript 实现
- 定义变量并读取 DOM 元素。
const cols = document.querySelectorAll('.col');
const gap = 20;
const colCount = 3;
const colHeights = Array(colCount).fill(0);- 遍历每一个元素，计算它的高度和宽度。
cols.forEach(col => {
const img = col.querySelector('img');
const height = img.height * (col.offsetWidth / img.width);
col.style.height = `${height}px`;
});- 找到最小高度的那一列并将元素插入其中。
-- -------------------- ---- -------
--- -------- - --
--- ---- - - -- - - ------------------ ---- -
-- -------------- - --------------------- -
-------- - --
-
-
---------------------- - ----------- - --------- - ---------
--------------------- - ----------------------------
-------------------- -- ------------------------ - ----瀑布样式布局的优化技巧
- 图片的懒加载。对于加载时间长的图片，可以使用懒加载来延迟加载，并且不会阻塞页面的加载。
- 减少 DOM 操作和重绘。可以将相同宽度和高度的元素保存到数组中，避免每次重新计算。
- 等高布局。对于文本内容比较多的元素，可以使用等高布局，让所有元素的高度相同。
总结
瀑布样式布局在响应式设计中应用广泛，通过简单的 CSS 样式和 JavaScript 实现，可以轻松实现自适应排列的效果，并且还可以通过优化技巧提高性能和用户体验。希望本文对你有所帮助。完整示例代码如下：
-- -------------------- ---- -------
---- ------------------
---- ------------
---- ---------------- -------
------------
----------
------
---- ------------
---- ---------------- -------
------------
----------
------
---- ------------
---- ---------------- -------
------------
----------
------
---- ------------
---- ---------------- -------
------------
----------
------
---
------
-------
---------- -
-------- -----
---------- -----
-
---- -
------ --------- - - - ------
------- - ---- -----
-
---- --- -
------ -----
-------------- -----
-
--------
--------
----- ---- - ----------------------------------
----- --- - ---
----- -------- - --
----- ---------- - ------------------------
------------------ ------ -- -
----- --- - -------------------------
----- ------ - ---------- - ---------------- - -----------
---------------- - --------------
--- -------- - --
--- ---- - - -- - - ------------------ ---- -
-- -------------- - --------------------- -
-------- - --
-
-
---------------------- - ----------- - ---------------- - ---------
--------------------- - ----------------------------
-------------------- -- ---------------- - ----
---
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647da2ff968c7c53b086fbc3