瀑布流布局是一种常见的网页布局方式，通常用于展示图片、文章等内容。传统实现方式多为使用 JavaScript 等脚本语言实现，但是在 CSS Grid 布局出现之后，我们可以使用纯 CSS 实现瀑布流布局，避免了额外的 JavaScript 代码和库的依赖，提高了网页的加载速度。
CSS Grid 简介
CSS Grid 布局是一种二维的布局方式，能够快速高效地实现各种复杂的布局效果。CSS Grid 布局分为网格容器、网格项目两个概念：
- 网格容器：使用
display: grid定义，包裹着所有的网格项目。 - 网格项目：容器中的所有子元素，使用
grid-column、grid-row等相关属性指定在网格中的位置。
下面是一个使用 CSS Grid 实现的简单布局示例代码：
// www.javascriptcn.com code example
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.item2 {
grid-column: 3;
grid-row: 1;
}
.item3 {
grid-column: 2;
grid-row: 2;
}
.item4 {
grid-column: 1;
grid-row: 3;
}
.item5 {
grid-column: 2;
grid-row: 3;
}
.item6 {
grid-column: 3;
grid-row: 3;
}
</style>上述代码中，我们使用 display: grid 将父容器设为网格容器，然后使用 grid-template-columns 指定网格容器的列数及宽度，使用 grid-gap 指定网格之间的间距。而各个子元素则使用 grid-column、grid-row 指定在网格容器中的位置。
瀑布流布局实现
接下来，我们将介绍使用 CSS Grid 布局实现瀑布流布局的详细步骤。假设我们要展示一组图片，每行展示三张，高度自适应，如下图所示：
首先，我们需要使用 CSS Grid 实现一个简单的等宽等高网格布局，示例代码参见上文。接着，我们需要修改该布局，使其支持动态高度。
我们可以使用 grid-auto-rows 属性指定网格行高度自适应，如下所示：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}上述代码中，我们指定了网格容器的列数、列宽、列间距，并使用 grid-auto-rows 属性指定了网格行的高度自适应。其中，minmax(100px, auto) 指定了网格行的最小高度为 100px，最大高度为自适应。
接着，我们需要实现瀑布流排列的效果，即在每一列中，图片位置按照从上到下的顺序依次填充。我们可以使用 grid-auto-flow 属性指定网格自动流动的方向为竖向，如下所示：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: dense;
}上述代码中，我们使用 grid-auto-flow 属性指定网格自动流动的方向为竖向，同时使用 dense 选项指定了网格容器中的项目应尽可能地填满空隙。这样，我们就实现了瀑布流布局的效果。
最后，我们对网格进行优化。由于 CSS Grid 天生支持响应式布局，我们只需要在适当的媒体查询中调整网格列数即可。具体代码如下：
// www.javascriptcn.com code example
.container {
display: grid;
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: dense;
}
@media screen and (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1200px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}上述代码中，我们分别在 768px 和 1200px 屏幕宽度下，使用 grid-template-columns 属性指定网格容器的列数及宽度。
最终，我们就实现了使用 CSS Grid 布局实现瀑布流布局的效果，完整示例代码如下：
// www.javascriptcn.com code example
<div class="container">
<div class="item"><img src="https://dummyimage.com/300x300/000/fff&text=1" alt="1"></div>
<div class="item"><img src="https://dummyimage.com/300x500/000/fff&text=2" alt="2"></div>
<div class="item"><img src="https://dummyimage.com/300x250/000/fff&text=3" alt="3"></div>
<div class="item"><img src="https://dummyimage.com/300x400/000/fff&text=4" alt="4"></div>
<div class="item"><img src="https://dummyimage.com/300x200/000/fff&text=5" alt="5"></div>
<div class="item"><img src="https://dummyimage.com/300x600/000/fff&text=6" alt="6"></div>
<div class="item"><img src="https://dummyimage.com/300x350/000/fff&text=7" alt="7"></div>
<div class="item"><img src="https://dummyimage.com/300x450/000/fff&text=8" alt="8"></div>
<div class="item"><img src="https://dummyimage.com/300x300/000/fff&text=9" alt="9"></div>
</div>
<style>
.container {
display: grid;
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: dense;
}
@media screen and (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1200px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
.item img {
display: block;
width: 100%;
height: auto;
}
</style>结语
通过使用 CSS Grid 布局，我们可以轻松实现瀑布流布局效果。而且由于 CSS Grid 天生支持响应式布局，我们只需要在适当的媒体查询中调整网格列数即可。同时，由于 CSS Grid 布局支持自适应行高度，我们还可以通过 CSS 动画等方式使图片的高度自适应，进一步提升网页的美观效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d06555e46428fe9ed61cbe