瀑布流布局是一种常见的网页布局方式，它将内容以多列的方式呈现，每一列的高度根据其中的元素动态调整。这种布局方式可以让网页看起来更加美观，而自适应瀑布流布局则更加适合不同尺寸的设备。在本篇文章中，我们将介绍如何使用 CSS Grid 和 JavaScript 实现自适应瀑布流布局。
CSS Grid 简介
CSS Grid 是一种基于网格布局的 CSS 技术，它可以让我们以更加灵活的方式控制网页元素的排布和尺寸。我们可以使用 CSS Grid 定义网格容器和网格项，并对它们进行定位和调整。以下是一个简单的例子：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- ---- --------- ----- - ---------- - ----------------- ----- -------- ----- -
上述代码定义了一个网格容器，其中有两列，每一列的宽度都是 1fr，它们之间的间隔是 10px。我们在容器中添加了若干个网格项，每一个网格项都有一个灰色背景和 10px 的内边距。这个布局可以呈现出两列等宽的网格项。
瀑布流布局实现
基于 CSS Grid，我们可以较为容易地实现瀑布流布局。以下是一个简单的实现方式：
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- ----------------- ------------- ------
--------- -----
-
---------- -
----------------- -----
-------- -----
-
------ ------ --- ----------- ------ -
--------------- -
---------------------- ----------------- ------------ ------
-
-上述代码中，我们使用了 CSS Grid 定义了一个容器，其中每一列的最小宽度是 200px，列数会自动填充，列与列之间的距离是 10px。我们也定义了一个网格项样式，其中有一个灰色的背景和 10px 的内边距。
而在手机端，我们将每一列的宽度设置为 100%，即每个网格项都占满整个容器，这样可以使布局更加自适应。
然而，这个布局仍然存在问题：每一列的高度并不等于其他列，最终会出现空白或重叠的情况。因此，我们需要使用 JavaScript 动态计算和调整每一列的高度。
以下是一个简单的实现方式：
-- -------------------- ---- -------
--- --------- - ----------------------------------------
--- ------- - -- -- ---- -
-------- ------------------ -
--- -------------- - ------------------------------------------------------
--- -------------- - ----
--- ---------------- - ------------------------- - ----------------
------- - ----------- ------------------
-
-------- ------------ -
--- ------- - -----------------------
---------------------- -- -
--- --------- - ---------------------
--- ----------- - ---------------------------
----------------------- - ----------- - --
-------------------- -- ----------------- - --- -- -------
---
-
--------------------------------- -- -- -
-------------------
-------------
---
-------------------
-------------上述代码中，我们首先获取了所有的网格项和容器宽度。然后计算了一个理想的网格项宽度（200px），以及容器中可用的列数。接着计算出每一列的高度，以及每一个网格项所在的列数，并且记录每一列的高度值。
最后，我们将列数和每个网格项的位置用 CSS Grid 来调整，以达到自适应瀑布流布局的效果。在窗口大小变化时，我们还需要重新计算列数和网格项的位置。
总结
在本篇文章中，我们介绍了使用 CSS Grid 和 JavaScript 实现自适应瀑布流布局的方法。通过 CSS Grid 我们可以定义网格容器和网格项的排布和尺寸，而使用 JavaScript 可以根据容器宽度动态计算和调整每一列的高度。这种布局方式可以适应不同尺寸的设备，并展示出美观的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6470879d968c7c53b0ea9d59