纯css瀑布流

基础概念

瀑布流（Masonry Layout）是一种网页布局方式，其中元素按列排列，每列的高度根据元素的高度动态调整，使得布局看起来像瀑布一样层层叠叠。纯CSS实现瀑布流布局不依赖JavaScript，主要通过CSS的多列布局（Multi-column Layout）特性来实现。

类型

固定列数：预先设定列数，元素按列填充。
自适应列数：根据容器宽度动态调整列数。

应用场景

图片展示：适用于图片库、画廊等场景，能够充分利用屏幕空间，展示更多内容。
新闻列表：适用于新闻网站，能够使内容更加有序和美观。
商品展示：适用于电商网站，能够展示更多商品信息。

示例代码

以下是一个简单的纯CSS瀑布流布局示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure CSS Masonry Layout</title>
    <style>
        .masonry-container {
            column-count: 3; /* 固定列数 */
            column-gap: 10px;
        }
        .masonry-item {
            break-inside: avoid;
            margin-bottom: 10px;
            background-color: #f0f0f0;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="masonry-container">
        <div class="masonry-item">Item 1</div>
        <div class="masonry-item">Item 2</div>
        <div class="masonry-item">Item 3</div>
        <div class="masonry-item">Item 4</div>
        <div class="masonry-item">Item 5</div>
        <div class="masonry-item">Item 6</div>
        <!-- 更多项 -->
    </div>
</body>
</html>

参考链接

MDN Web Docs - Multi-column Layout

常见问题及解决方法

元素重叠：
- 原因：可能是由于break-inside: avoid属性没有正确应用。
- 解决方法：确保每个瀑布流项都包含break-inside: avoid属性。

列数不适应屏幕宽度：
- 原因：可能是由于column-count属性固定了列数。
- 解决方法：使用CSS媒体查询（Media Queries）来动态调整列数。

@media (max-width: 768px) {
    .masonry-container {
        column-count: 2;
    }
}
@media (max-width: 480px) {
    .masonry-container {
        column-count: 1;
    }
}

通过以上方法，可以实现一个简单且响应式的纯CSS瀑布流布局。