纯CSS实现瀑布流布局的两种方案

最新推荐文章于 2025-12-05 22:39:33 发布

原创最新推荐文章于 2025-12-05 22:39:33 发布 · 9k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #瀑布流布局 #column #Flexbox #Web前端

Web前端专栏收录该内容

22 篇文章

订阅专栏

本文介绍了使用纯CSS实现瀑布流布局的两种方法，一种利用CSS3的column属性，另一种采用Flexbox布局，详细展示了HTML与CSS代码实现过程。

博主最近在学习有关布局的相关知识，总结了使用纯CSS实现瀑布流布局的两种方案。
那么什么叫瀑布流布局呢？让我们通过图片来了解一下：

瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。
废话不多说，直接上方案：

1. 方案一，使用CSS3的column属性，具体实现如下：
html代码：

<body>
<div class="container">
    <div class="item">
        <div class="itemContent" style="background-color: blue;height: 50px">1</div>
    </div>
    <div class="item">
        <div class="itemContent" style="background-color: rosybrown;height: 100px">2</div>
    </div>
    <div class="item">
        <div class="itemContent" style="background-color: red;height: 80px">3</div>
    </div>
    ...为了方便省略了中间代码，这里为了方便区分，直接使用内联样式创建了四种颜色、高度各不相同的div块共20个
    <div class="item">
        <div class="itemContent" style="background-color: blue;height: 50px">19</div>
    </div>
    <div class="item">
        <div class="itemContent" style="background-color: red;height: 80px">20</div>
    </div>
</div>
</body>

这里用class为container的div标签作为最外层的父容器，里面是20个class为item的div标签，每个标签里都包裹着不同的内容div块。
然后是CSS代码：

.container{
	width: 100%;
	column-count: 5;
}
.item{
	break-inside: avoid;
	margin-bottom:10px;
}

这里的关键属性是column-count，设置列数为5。然后是break-inside:avoid，为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。这样就实现了瀑布流布局，效果如下：

瀑布流实现

2.第二种方案是使用Flexbox布局
首先，修改一下html中的代码：

<div class="column">
    <div class="item">
        <div class="itemContent" style="background-color: blue;height: 50px">1</div>
    </div>
    <div class="item">
        <div class="itemContent" style="background-color: rosybrown;height: 100px">2</div>
    </div>
    <div class="item">
        <div class="itemContent" style="background-color: red;height: 80px">3</div>
    </div>
    <div class="item">
        <div class="itemContent" style="background-color: rosybrown;height: 100px">4</div>
    </div>
</div>
...

这里为每4个div块的外面包了一层div作为单独的列，class为column，其余保持不变。(因为一共用了20个div块，在上一个例子中分为了5列，所以这里为了保持一致把每4个div块设置成了一列)
下面是CSS代码：

.container{
	display: flex;
	flex-direction: row;
}
.column{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 10px;
}
.item{
	margin-bottom: 10px;
}

这里把container和column都设置为flex布局，container的属性设置为flex-direction:row，column的属性设置为flex-direction: column，还要设置一下每一列的宽度，这里设置为width: 100%。这样，也实现了瀑布流布局，效果如下：
瀑布流实现
这两种方案都是通过纯CSS实现的，或许方案不够完美，如果需要更完美的方案可以采用js实现，不多说了，博主去学习了！