瀑布流布局（Waterfall Flow Layout），也被称为瀑布流式布局，简称瀑布流，是一种图片排列的布局方式，它的排列方式就像瀑布一样流淌而下。这种布局方式经常在 Pinterest 等图片类网站中使用，可以有效地展示大量图片，提高用户体验。在这篇文章中，我们将介绍如何使用 CSS 网格布局实现瀑布流布局，并提供一些有关技巧和代码实例。
什么是 CSS 网格布局？
CSS 网格布局是一种二维布局方式，它基于网格（Grid）的概念，可以划分为行和列，用于布局和排列网页元素。CSS 网格布局是一种强大的布局方式，其允许设计者按照网格的结构来布局元素，而不需要通过 float、position 或 table 标记等方法来实现复杂的布局。
CSS 网格布局支持响应式设计，并提供了丰富的属性用于控制网格内容的方式。一旦开发者掌握了这种布局方式，他们就可以更轻松地处理不同屏幕尺寸和分辨率对网站的影响。现在，我们有了一个前置知识，接下来就可以介绍如何使用 CSS 网格布局实现瀑布流布局。
实现瀑布流布局的样式选择器
在 CSS 网格布局中，可以使用五个样式选择器来创建网格布局。这些选择器是：
- 基础格子选择器（grid-item）
- 纵向线选择器（grid-column）
- 横向线选择器（grid-row）
- 纵向轨道（grid-column-track）
- 横向轨道（grid-row-track）
在瀑布流布局中，我们将要使用基础格子选择器（grid-item），它将作为瀑布流中的每个图像的基础布局。这个选择器将设置每个图像的大小和位置。
实现瀑布流布局的技巧
1. 创建网格容器
使用 CSS 网格布局时，首先要做的就是创建一个网格容器。所有的子元素都将在这个网格中排列。为了创建一个网格容器，我们需要将一个 HTML 元素的样式添加到 CSS 文件中。这个样式依赖于所有子元素的大小，所以必须设置一个大小。
<div class="grid-container"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> ... </div>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 15px;
padding: 15px;
margin: 0 auto;
}在这个示例中，我们使用了一个带有 grid 属性的样式来创建网格容器，并设置了 grid-template-columns 为 repeat(auto-fill, minmax(250px, 1fr))，其中 auto-fill 选项将填充屏幕空间，而 minmax 函数将设置宽度范围。最后，我们添加了一个 grid-gap 属性，以使每个元素的间距变得更美观。
2. 设置网格项
瀑布流布局中的每个项目都应该作为一个网格项目来设置，在 CSS 中可以写成 .grid-item，以便为所有元素提供一个样式和位置。要创建一个网格项，我们需要使用 grid-column 和 grid-row 属性来指定其位置：
.grid-item {
grid-column: span 2;
grid-row: span 3;
}在这个示例中，我们设置了 grid-column 和 grid-row 属性的值，使得每个项目都跨越了两个列和三个行。在实际使用中，这些值应根据图像的大小和数量进行调整。
3. 使用 grid-auto-rows 和 grid-auto-flow 属性
一些项目可能小于其他项目，所以如果我们只使用 grid-template-columns 和 grid-template-rows 属性的固定值，页面就可能出现不对齐的问题。这时候，我们可以使用 grid-auto-rows 属性来设置项目行高的默认值，并使用 grid-auto-flow 属性来让浏览器自动分配并创建新的网格行作为新的图片所在行。
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----------------- ------------- ------ --------- ----- -------- ----- ------- - ----- --------------- ------------- ------ --------------- ------ -
在这个示例中，我们使用了 grid-auto-rows: minmax(100px, auto) 来设置每个项目的最小行高为100像素以及自动行高，同时也保证了小图片的变形问题没有准确的解决方式。我们还使用了 grid-auto-flow: dense 属性，这个属性可以让浏览器自动分配项目，并满足我们之前设置的 grid-template-columns 和 grid-auto-rows 属性值。
4. 使用 JavaScript 动态加载图片
为了优化页面加载速度，我们可以使用 JavaScript 代码来动态地加载图片。在加载图片时，我们可以使用 Image 对象创建一个新的图片。然后，我们可以将图片的高度设置为零，以便页面可以快速呈现其他元素，而加载更多图片时不会造成滚动条的跳动问题。在图片加载完成后，我们可以将其高度设置为其实际高度，以使页面更加流畅。
-- -------------------- ---- -------
---- -----------------------
---- ------------------
---- ------- ------------ -------------------------
------
---- ------------------
---- ------- ------------ -------------------------
------
---- ------------------
---- ------- ------------ -------------------------
------
---- ------------------
---- ------- ------------ -------------------------
------
---- ------------------
---- ------- ------------ -------------------------
------
---
------function imgLoaded(img) {
img.style.height = 'auto';
img.parentNode.style.gridRowEnd = `span ${Math.ceil(img.clientHeight / 10)}`;
}在这个示例中，我们定义了一个名为 imgLoaded 的函数，并将其添加到所有的图片元素中。当使用该函数加载图片时，此函数设置图片的高度为自适应，以便更好地适应不同大小的图片。我们还通过计算父元素的行数来覆盖以前的 grid-row 属性值，以确保所有图像都正确布置到瀑布流式布局中。
示例代码
以下是一个完整的示例代码，其中演示了如何使用 CSS 网格布局实现瀑布流布局。代码中的图片被分为三组，每组包含不同数量和大小的图像，以模拟实际使用中的情况。尽管这个示例仍然有一些瑕疵，但它可以让你快速了解如何使用 CSS 网格布局实现瀑布流布局。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------
-------
- -
----------- -----------
------- --
-------- --
-
--------------- -
-------- -----
---------------------- ----------------- ------------- ------
--------- -----
-------- -----
------- - -----
--------------- ------------- ------
--------------- ------
-
---------- -
-------- -----
---------------- -------
------------ -------
----------------- -----
---------- -----
------ --------
-
---------- --- -
------- -----
------- -----
------ -----
----------- ------
-
--------
-------
------
---- -----------------------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- -----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
---- ------------------
---- ----------------------------------
------
------
--------
------------------------------- -------- -- -
----- ------ - ------------------------------------- ------
------------------ -- -
---------- - -------- -- -
------------------------------- - ----- ---------------------------- - ------
---------------- - -------
--
------- - --------
---
---
---------
-------
-------总结
在这篇文章中，我们探讨了如何使用 CSS 网格布局实现瀑布流布局，给出了一些有关技巧和代码示例。CSS 网格布局是一个强大的技术，并且易于使用，因此它是开发者们在处理大量图片时的一种选择。希望这篇文章可以帮助大家更好地了解如何使用 CSS 网格布局实现瀑布流布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652c87337d4982a6ebe3810c