0
| 上一月 | 一 | 下一月 | ||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 |
使用 CSS3 弹性布局（Flexbox）实现瀑布流效果需要结合一些技巧，以下是纯 CSS 的实现方法：
1230博客
<!DOCTYPE html>
<html>
<head>
<style>
.waterfall {
display: flex;
flex-direction: column; /* 纵向排列 */
flex-wrap: wrap; /* 允许换行 */
height: 100vh; /* 必须设置固定高度 */
align-content: flex-start; /* 内容从顶部开始 */
gap: 10px; /* 元素间距 */
}
.item {
width: calc(33.33% - 10px); /* 三列布局（需根据列数调整） */
break-inside: avoid; /* 防止元素被分割到不同列 */
background: #f0f0f0;
padding: 10px;
box-sizing: border-box;
}
/* 为演示生成不同高度的元素 */
.item:nth-child(3n+1) { height: 150px; }
.item:nth-child(3n+2) { height: 200px; }
.item:nth-child(3n+3) { height: 180px; }
</style>
</head>
<body>
<div class="waterfall">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<!-- 更多元素... -->
</div>
</body>
</html>
实现原理：
flex-direction: column 纵向排列flex-wrap: wrap 允许内容换列height: 100vh)calc(33.33% - gap))局限性：
更推荐的 CSS Grid 方案：
.waterfall {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
gap: 10px;
}
如需动态高度自适应布局，建议：
Flexbox 在瀑布流布局中并非最佳选择，建议根据实际需求选择更合适的布局方案。
热门推荐：
0
