css瀑布流布局横向

CSS 瀑布流布局横向基础概念

CSS 瀑布流布局（Masonry Layout）是一种流行的网页布局方式，它将元素垂直排列，同时根据元素的宽度自动调整列的高度，使得布局看起来像是由多列组成的。横向瀑布流布局则是将这种布局方式应用于水平方向，元素横向排列，高度自适应。

类型

纯 CSS 实现：使用 CSS Grid 或 Flexbox 可以实现简单的横向瀑布流布局。
JavaScript 辅助：对于更复杂的布局需求，可以使用 JavaScript 来动态计算和调整元素的位置。

应用场景

图片展示：在图片库或相册网站中，横向瀑布流布局可以有效地展示大量图片。
商品展示：在电商网站中，横向瀑布流布局可以用于展示商品列表，提供更好的视觉效果。
文章列表：在博客或新闻网站中，横向瀑布流布局可以用于展示文章摘要，增加页面的吸引力。

示例代码（纯 CSS 实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Masonry Layout</title>
    <style>
        .masonry {
            display: flex;
            flex-wrap: wrap;
            margin-left: -30px; /* Adjust for spacing */
            width: calc(100% + 30px); /* Adjust for spacing */
        }
        .masonry-item {
            background: #ccc;
            margin-left: 30px; /* Adjust for spacing */
            margin-bottom: 30px; /* Adjust for spacing */
            padding: 15px;
            width: calc(25% - 30px); /* Adjust for spacing and number of columns */
        }
        @media (max-width: 1200px) {
            .masonry-item {
                width: calc(33.33% - 30px);
            }
        }
        @media (max-width: 800px) {
            .masonry-item {
                width: calc(50% - 30px);
            }
        }
        @media (max-width: 500px) {
            .masonry-item {
                width: calc(100% - 30px);
            }
        }
    </style>
</head>
<body>
    <div class="masonry">
        <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>