纯CSS实现瀑布流布局：仅需HTML和CSS就能打造自适应的瀑布流页面

纯CSS实现瀑布流布局：仅需HTML和CSS就能打造自适应的瀑布流页面

引用

CSDN

1.

https://blog.csdn.net/Jzsn_Paul/article/details/140169578

瀑布流布局是一种常见的网页布局方式，其特点是页面元素像瀑布一样上下紧凑排列，常用于图片展示、电商和博客网站。过去实现这种布局需要复杂的JavaScript计算，但现在仅使用CSS就能轻松实现。本文将详细介绍如何使用CSS Grid实现一个自适应的瀑布流页面。

瀑布流布局的特点

瀑布流布局主要有以下特征：

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

实现步骤

1. 设置必要的HTML元素

首先创建一个包含10个示例元素的HTML结构：

<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代码

接下来是实现瀑布流布局的核心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函数根据容器宽度自动填充尽可能多的列，每列最小宽度为200px，最大宽度为1个弹性单位。

2. grid-auto-rows

grid-auto-rows: 10px;

这个属性定义了网格容器中自动创建的行的高度，确保跨行效果的一致性。

3. gap

gap: 20px;

这个属性用于设置每一项之间的间隔，创建视觉分割。当只有一个值时，该值将同时应用于行和列之间的间距。

4. grid-row

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

这个属性用于设置每个网格项跨越的行数，形成不同高度的网格项，模仿瀑布流效果。

浏览器兼容性

CSS Grid布局在现代浏览器中已经得到了很好的支持。如果需要兼容更老的浏览器，可以考虑使用相关的Polyfill。