什么是瀑布流布局？
瀑布流布局是一种流式布局，可以动态地排列不同宽度的元素，使它们在页面中呈现出瀑布一样的效果。它像瀑布一样垂直流动，每个元素之间的间隔是相等的。这种布局方式在图片、博客、商品展示等网页设计中非常常见。
例如，下面是一个简单的瀑布流布局：
CSS Grid 实现瀑布流布局
CSS Grid 是一个强大的网格布局系统，可以轻松实现复杂的布局方式，包括瀑布流布局。下面是一些使用 CSS Grid 实现瀑布流布局的步骤。
步骤 1：设置 Grid 容器
首先，我们需要创建一个 Grid 容器，并指定它的行高和列宽。在这个示例中，我们将设置一个总共 3 列，每列的宽度为 300 像素，行高为 auto，这将使得每个元素的高度根据其自己内容自适应。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 300px);
grid-auto-rows: auto;
grid-gap: 10px;
}步骤 2：设置 Grid 元素
接下来，我们需要设置每个元素的位置，并使用 grid-row-end 属性确定元素的行数。我们可以通过 JavaScript 计算出每个元素的行数，或者通过设置每个元素的高度来手动设置。
.grid-item {
grid-row-end: span 1;
}步骤 3：设置 Grid Gap
最后，我们需要设置 Grid 元素之间的间距。可以通过设置 grid-gap 属性来完成。
.grid-container {
grid-gap: 10px;
}示例代码
下面是一个示例代码，可以帮助你了解如何实现瀑布流布局。
-- -------------------- ---- -------
---- -----------------------
---- ----------------- -------------------- ---- ---
---- ---------------- ---------- ---
------
---- ----------------- -------------------- ---- ---
---- ---------------- ---------- ---
------
---- ----------------- -------------------- ---- ---
---- ---------------- ---------- ---
------
---- ----------------- -------------------- ---- ---
---- ---------------- ---------- ---
------
---- ----------------- -------------------- ---- ---
---- ---------------- ---------- ---
------
---- ----------------- -------------------- ---- ---
---- ---------------- ---------- ---
------
---- ----------------- -------------------- ---- ---
---- ---------------- ---------- ---
------
---- ----------------- -------------------- ---- ---
---- ---------------- ---------- ---
------
------
-------
--------------- -
-------- -----
---------------------- --------- -------
--------------- -----
--------- -----
-
---------- -
------- --- ----- -----
-------- -----
----------- -------
---------- -----
-
--- -
---------- -----
-
--------总结
CSS Grid 是一个强大的网格布局系统，可以轻松实现瀑布流布局。只需要简单的几步，我们就可以创建一个动态的瀑布流布局，并使其适应不同屏幕尺寸。当然，这只是 CSS Grid 的一部分，更深入的学习可以提高你的前端技能，同时也可以让你设计出更出色的网页。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d7aea968c7c53b08445f6