瀑布流布局是一种非常流行的网页布局方式，它可以让网页看起来更加美观、有趣。Pinterest 是一个非常成功的社交媒体平台，它使用了瀑布流布局来展示用户上传的图片和视频。在本文中，我们将介绍如何使用 CSS Grid 实现 Pinterest 式瀑布流布局。
什么是 CSS Grid？
CSS Grid 是一种用于创建网页布局的 CSS 模块。它可以让开发者更加容易地创建复杂的网页布局，而不需要使用传统的 float 和 position 属性。CSS Grid 可以非常灵活地控制网页元素的位置和大小，因此非常适合用于实现瀑布流布局。
实现 Pinterest 式瀑布流布局的方法
步骤一：创建网格容器
首先，我们需要创建一个网格容器，它将包含我们的所有网格项。我们可以使用 display: grid 属性来创建网格容器，如下所示：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
}在上面的代码中，我们使用 grid-template-columns 属性来定义网格容器的列。repeat(auto-fill, minmax(200px, 1fr)) 表示我们希望网格容器中的列自动填充，每列的最小宽度为 200px，最大宽度为 1fr（即剩余空间的比例）。grid-gap 属性用于定义网格项之间的间距。
步骤二：创建网格项
接下来，我们需要创建网格项，它们将被放置在网格容器中。我们可以使用普通的 HTML 元素来创建网格项，如下所示：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <!-- more items... --> </div>
在上面的代码中，我们使用 div 元素来创建网格项。我们可以为每个网格项设置不同的高度，以实现瀑布流布局的效果。
步骤三：使用 grid-row-end 属性
为了让网格项具有不同的高度，我们可以使用 grid-row-end 属性。该属性指定了网格项结束的行号，可以让我们将网格项放置在不同的行上。例如：
-- -------------------- ---- ------- ------------------ - ------------- ---- -- - ------------------ - ------------- ---- -- - ------------------ - ------------- ---- -- -
在上面的代码中，我们使用 :nth-child 选择器来选择不同的网格项，然后使用 grid-row-end 属性将它们放置在不同的行上。span 值表示我们希望该网格项占据的行数。
步骤四：使用 JavaScript 动态设置网格项高度
如果我们希望网格项的高度可以自适应内容，我们可以使用 JavaScript 动态设置网格项的高度。例如：
const items = document.querySelectorAll('.item');
items.forEach(item => {
const content = item.querySelector('.content');
item.style.gridRowEnd = `span ${Math.ceil(content.getBoundingClientRect().height / 10)}`;
});在上面的代码中，我们使用 querySelectorAll 方法选择所有的网格项，然后遍历它们，计算网格项中内容的高度，并将网格项的高度设置为该值的整数除以 10（这是为了让网格项的高度更加平滑）。
示例代码
下面是一个完整的示例代码，可以在浏览器中运行：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---- --------- --------------
-------
---------- -
-------- -----
---------------------- ----------------- ------------- ------
--------- -----
-
----- -
----------------- -----
-------- -----
-------------- ----
----------- - - --- ------- -- -- -----
--------- -------
-
------------------ -
------------- ---- --
-
------------------ -
------------- ---- --
-
------------------ -
------------- ---- --
-
-------- -
------- --
-------- --
-
--------
-------
------
---- ------------------
---- -------------
-- --------------------- ----- ----- --- ----- ----------- ---------- ----- --- -------- ----- -- ----------- ---------- ----- ----- --------- ----------
------
---- -------------
-- ------------------------- -- ----- -- ---- ------ ---------- ------ --------- --- -- ------- -------- ---- ------ ----- ----- -- ------- ---- ---- ----- ---------
------
---- -------------
-- ------------------ --- --------- ------ --------- --- -------- ----- -- ----------- ---------- ----- ----- --------- ------ --- --------- ---- ------ --- -----------
------
---- -------------
-- --------------------- -- ------ --- ------ -------- ----------- ----- --------- ---------- ------- ----- -- -- ------- -- -------- --- ----------------
------
---- -------------
-- ----------------------- -- ------- ---- ---- --------- ----- --- -------- ----- -- ----------- ---------- ----- ----- --------- ------ --- --------- ---- ------ --- -----------
------
---- -------------
-- ------------------- -- ----- ----- ------ -------- ----------- ------ -- ------ ------- ------ ------------ --- -- -------- --------- ------ ---- ------ ----- --- --------- ---- ----- ---- ----------
------
---- -------------
-- ------------------- -------- ----- -- ----------- ---------- ----- ----- --------- ------ --- --------- ---- ------ --- ------- -- --- --------- ------ -------------
------
---- -------------
-- --------------------- -- ------ --- ------ -------- ----------- ----- --------- ---------- ------- ----- -- -- ------- -- -------- --- ----------------
------
---- -------------
-- ----------------------- -- ------- ---- ---- --------- ----- --- -------- ----- -- ----------- ---------- ----- ----- --------- ------ --- --------- ---- ------ --- -----------
------
------
--------
----- ----- - -----------------------------------
------------------ -- -
----- ------- - -------------------------------
--------------------- - ----- -------------------------------------------------- - ------
---
---------
-------
-------结论
使用 CSS Grid 实现 Pinterest 式瀑布流布局非常容易，只需要几行代码就可以实现。我们可以使用 grid-template-columns 属性来定义网格容器的列，使用 grid-row-end 属性来控制网格项的位置和高度。如果我们希望网格项的高度可以自适应内容，可以使用 JavaScript 动态设置网格项的高度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672749342e7021665e1cad8c