什么？2024年只要 HTML 和 CSS 就可以实现一个自适应的瀑布流页面了？

瀑布流页面布局，故名思义就是页面上的元素子项像瀑布一样进行上下紧凑布局，一般图片类网站、电商类或者博客类的网站经常会使用这种布局，使得展示的元素比较紧凑和丰富， 类似下图

这里总结一下瀑布流布局主要有以下特征：

1. 瀑布流布局的子项可以具有不同的高度，与标准网格相比，瀑布流布局看起来更自然。
2. 瀑布流布局可以适应不同的屏幕尺寸，会根据屏幕的尺寸动态调整布局的列数和子项的位置

在几年前，我们要实现上述的特征的布局，往往需要借助 js的动态计算能力来实现，实现起来比较繁琐且需要考虑的场景比较多。因此在以前这也是面试中常考的手写题之一。

但是现在 2024 年了，我们完全可以使用纯 CSS 无任何其他依赖，实现一个高效的瀑布流布局。

接下来让我开始从 0 到 1 实现这个瀑布流案例吧

1. 设置必要的 HTML 元素

这里设置10个示例的 DOM 结构, 以及必要的class

 <div class="waterfall">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
    <div class="item item5">Item 5</div>
    <div class="item item6">Item 6</div>
    <div class="item item7">Item 7</div>
    <div class="item item8">Item 8</div>
    <div class="item item9">Item 9</div>
    <div class="item item10">Item 10</div>
</div>

2. 编写最关键的 CSS 代码

为了凸显关键的代码，我们对一些无关的样式进行隐藏， 只保留最关键的代码

 
      .waterfall {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 10px;
        gap: 20px;
      }

      .item1 {
        grid-row: span 15;
        background-color: #ff6f61;
      }
      .item2 {
        grid-row: span 20;
        background-color: #6b5b95;
      }
      .item3 {
        grid-row: span 10;
        background-color: #88b04b;
      }
      .item4 {
        grid-row: span 25;
        background-color: #d65076;
      }
      .item5 {
        grid-row: span 30;
        background-color: #ffb347;
      }
      .item6 {
        grid-row: span 15;
        background-color: #45b8ac;
      }
      .item7 {
        grid-row: span 20;
        background-color: #e94b3c;
      }
      .item8 {
        grid-row: span 10;
        background-color: #6c5b7b;
      }
      .item9 {
        grid-row: span 25;
        background-color: #00a86b;
      }
      .item10 {
        grid-row: span 30;
        background-color: #b565a7;
      }

实现效果：

从上面的代码中，我们可以看出关键的 CSS 有这些：

1. grid-template-columns

     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

   这个属性定义在父容器上，主要定义子元素列的排布。

这里的 repeat 函数主要是定义列的数量和尺寸。

repeat(count, track_size);

count 和 track size，它们共同决定了轨道的数量和尺寸。

• repeat(auto-fill, ...)：使用 auto-fill，浏览器会根据容器的宽度自动填充尽可能多的列。
• minmax(200px, 1fr)：每列的最小宽度为 200px，最大宽度为 1fr（1 个弹性单位）。当空间允许时，每列将尽可能地填满剩余的空间。

2. grid-auto-rows

     grid-auto-rows: 10px;

   grid-auto-rows 定义网格容器中自动创建的行的高度。这将所有自动生成的行高度设置为 10px。在结合 grid-row 属性时，这会创建跨越多行的效果。

3. gap

   gap: 20px;

   gap 属性主要是用于设置每一项之间的间隔，用于创建视觉分割。

gap属性是 row-gap 和 column-gap 两个属性的聚合。

当只有一个值时，该值将同时应用于行和列之间的间距。上例中，行和列之间的间距均为 20px。

当gap属性存在两个值时，第一个值表示行之间的间距（即 row-gap）。第二个值表示列之间的间距（即 column-gap）。

4. grid-row

grid-row: span 15;
grid-row: span 20;
grid-row: span 30;

定义网格项在网格容器中跨越的行数。

• grid-row: span 15;：这个网格项将跨越 15 行。由于每行高度为 10px，总高度将为 150px。
• grid-row: span 20;：这个网格项将跨越 20 行，总高度将为 200px。
• grid-row: span 30;：这个网格项将跨越 30 行，总高度将为 300px。

我们可以总结实现一个瀑布流的CSS关键是：

• grid-template-columns 确定列的宽度和数量，根据容器宽度自动填充更多列。
• grid-auto-rows 设置每行的高度，确保跨行效果的一致性。
• gap 设置网格项之间的间距，创建视觉分隔。
• grid-row 设置每个网格项跨越的行数，形成不同高度的网格项，模仿瀑布流效果。

兼容性

一提到 css 我相信好多小伙伴都担心兼容性的问题，grid 以前的兼容性却是有点不行，但是随着现在浏览器的支持程度的提升，现在的 grid 属性完全可以应用在生产了。

如果真的业务上需要兼容更远古的浏览器的话，可以找相关的 Polyfill

如果对你有帮助的话，欢迎点赞👍、关注➕、转发