如果你正在寻找一种能够实现瀑布流布局的方法，那么 CSS Flexbox 很可能是完美的解决方案。它可以使用非常少的 CSS 代码就能够实现一个美观且实用的瀑布流效果。
了解瀑布流布局
瀑布流布局是一种非常吸引人的前端设计技术。它通常用于展示图片、产品或文章等内容，这些内容元素根据其大小和高度自动排列在一个流式布局中。这种布局常常被用于网站首页、电子商务网站及博客页面等。
传统的实现方法是使用 JavaScript 或 jQuery 等库来实现。虽然这种方法很可靠且被广泛使用，但是使用这些库需要加载额外的 JavaScript 文件，可能会影响网站的性能。此外，JavaScript 实现瀑布流布局还需要一些复杂的逻辑和算法，这可能会增加代码的复杂性。
使用 CSS Flexbox 来实现瀑布流布局更为简洁而高效。它不需要额外的 JavaScript 库，而且只需要非常少的 CSS 代码即可实现流水布局。
实现瀑布流布局的 CSS Flexbox 方法
瀑布流布局使用了一个流式布局，让每个元素都按照其大小和高度自动排列。这也是 CSS Flexbox 的优势所在。可以通过 CSS Flexbox 设置父容器的 display 属性为 flex，并在子元素上设置 flex-grow, flex-shrink 和 flex-basis 属性来实现瀑布流布局。
下面是一个简单的 CSS Flexbox 瀑布流布局的示例代码：
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 33%;
}这个示例代码中，我们首先把容器的 display 属性设置为 flex 并使用 flex-wrap 将子元素进行换行。子元素使用 flex-basis 属性设置它们的大小。如果我们知道这些子元素的宽度是固定的，那么这里可以直接设置它们的宽度。
但是，在实际情况中，每个子元素可能都有不同的宽度和高度。这时候，我们就需要使用一个比较特殊的技巧 - 在定义一个反向排列的元素时，使用一个额外的「空」块，让它的高度占据那一列的空间。这样可以让其他元素自动排列在该位置。如下所示：
-- -------------------- ---- ------- ---- ------------------ ---- ------------ -------------- ----------- ------- ---- ------------ -------------- ----------- ------- ---- ------------ -------------- ----------- ------- ---- ------------ -------------- ----------- ------- ---- ------------ -------------- ----------- ------- ---- ------------ -------------- ----------- ------- ---- ------------ -------------- ----------- ------- ---- ------------ -------------- ----------- ------- ---- ------------ -------------- ----------- ------- ---- ----------- ----------------- ---- ----------- ----------------- ---- ----------- ----------------- ------
在这个示例代码中，我们定义了一个包含 9 个子元素的容器。每个子元素都有不同的固定高度，并使用 item 类名进行样式设置。最后三个子元素使用 invisible 类名隐藏了它们的内容。这三个「空」块会在之后用到。
接下来，我们可以使用 CSS Flexbox 实现一个简单的瀑布流布局，代码如下所示：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ----- -- ------- ---- - ---------- - ----------- ------- -
在这个代码中，我们将 .item 元素的 flex 属性设置为 1，这意味着每个子元素都会自动根据其内容占据可用的空间。我们还为子元素指定了一个 margin，以使其在布局中具有更好的外观。我们还添加了一个 invisible 类以隐藏空白块。
此时我们的布局看起来已经不错，但可能有时候最后几列布局不是很好看，所以我们需要修改一下代码，使其更加完整。
在上述 CSS 代码的基础上，我们需要加上 JavaScript 代码，将最后一列的元素自动填满。我们可以将「空」块的高度设置为比所有其他元素都高，以使它们始终占据最后一列。接下来，我们可以在页面加载时，使用 JavaScript 获取每列中的最高元素，并将小于此高度的所有元素填充到同一列中。代码如下所示：
-- -------------------- ---- -------
-------- ---------------- -
----- ----- - -----------------------------------
----- ------------ - ---------------------- - ---
----- ------- - ---
--- ---- - - -- - - ------------- ---- -
----- ------ - ----------------------
---------------------
-
----- ---------- - ---
--- ----------- - --
--- ---- - - -- - - ------------- ---- -
------------- - -------------------------------------- ----------- - ----
----------- -- --
-
--- ----------- - ---
--- ---- - - -- - - ------------------ ---- -
----------- -- ----- ----------- ---------- ---------------------------
-
- - ---------------
-
---------------------------------------------- -- ------------
----- -------- - -----------------------------------
----- ------------ - ---------------------------------------------------
--- ----- - --
--- ---- - - -- - - ------------------ ---- -
--- ---- - - -- - - -- ---- -
-- --------------------- -
---------------------------- - ---------------------
-
--------
-
-
-
-----------------在这个 JavaScript 代码中，我们首先获取所有子元素以及最大行数和每列最大高度。然后，我们使用 max() 函数获取每列的最大高度，并在该列中添加一个高度为 maxHeight + 10 的「空」块。最后，我们将所有可见的子元素的高度设置为该列的最大高度。
现在，你可以在一个流媒体网站、产品库或文章博客中使用此瀑布流布局了。整个过程的源代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------- ----------------------
-------
-- --- --
---------- -
-------- -----
---------- -----
-
-- --- --
----- -
--------- ---------
----- --
------- ----
----------------- --------
----------- --- --- --- --- ------- -- -- -----
-
-- ----------- --
---------- -
----------- -------
-
-- ---- --
---------- -
---------- -------
------- - -----
-
-- ----- --
------ ----------- ------ -
----- -
----------- -----
-
-
--------
-------
------
---- --- ---
---- ------------------
---- ------------ -------------- ----------- -------
---- ------------ -------------- ----------- -------
---- ------------ -------------- ----------- -------
---- ------------ -------------- ----------- -------
---- ------------ -------------- ----------- -------
---- ------------ -------------- ----------- -------
---- ------------ -------------- ----------- -------
---- ------------ -------------- ----------- -------
---- ------------ -------------- ----------- -------
---- ----------- -----------------
---- ----------- -----------------
---- ----------- -----------------
------
---- ---------- -- ---
--------
-------- ---------------- -
----- ----- - -----------------------------------
----- ------------ - ---------------------- - ---
----- ------- - ---
--- ---- - - -- - - ------------- ---- -
----- ------ - ----------------------
---------------------
-
----- ---------- - ---
--- ----------- - --
--- ---- - - -- - - ------------- ---- -
------------- - -------------------------------------- ----------- - ----
----------- -- --
-
--- ----------- - ---
--- ---- - - -- - - ------------------ ---- -
----------- -- ----- ----------- ---------- ---------------------------
-
- - ---------------
-
---------------------------------------------- -- ------------
----- -------- - -----------------------------------
----- ------------ - ---------------------------------------------------
--- ----- - --
--- ---- - - -- - - ------------------ ---- -
--- ---- - - -- - - -- ---- -
-- --------------------- -
---------------------------- - ---------------------
-
--------
-
-
-
-----------------
---------
-------
-------总结
CSS Flexbox 是一种非常高效和简洁的实现瀑布流布局的方法。通过为父容器添加 display: flex 属性并使用子元素的 flex-basis 属性，我们就能够实现一个美观且实用的瀑布流效果。并且，在对最后一列进行自适应处理时，我们还能够通过添加一个「空」块来以确保网站布局的完美呈现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c02da48841e9894a4d04b