瀑布流的样式-例子

admin

撰写于 2023年 05月 05 日

以下是一个基本的瀑布流布局的 CSS 样式：

.masonry {
    column-count: 3; /* 列数 */
    column-gap: 20px; /* 列之间的间距 */
}

.masonry .item {
    margin-bottom: 20px; /* 元素之间的垂直间距 */
    display: inline-block;
    width: 100%;
}

/* 根据实际图片大小调整瀑布流元素的高度 */
.masonry .item img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

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

以上 CSS 样式将元素放置在多列中，可以自动布局，使得整个布局更加美观。其中 column-count 属性设置列数，column-gap 属性设置列之间的间距。另外，通过 @media 样式实现在小屏幕下响应式布局，将列数适当调整。

在 HTML 中，可以将元素以 .item 的类名包裹，然后将所有的 .item 放在 .masonry 容器中，如下所示：

<div class="masonry">
  <div class="item">
    <img src="image1.jpg" alt="">
    <p>这里是图片描述</p>
  </div>
  <div class="item">
    <img src="image2.jpg" alt="">
    <p>这里是图片描述</p>
  </div>
  <!-- 其他元素... -->
</div>

请注意，瀑布流布局对浏览器的支持不够全面，可能需要使用浏览器前缀或 JavaScript 插件来实现兼容。