超简单CSS实现瀑布流（交错布局）

超简单CSS实现瀑布流（交错布局）

引用

CSDN

1.

https://blog.csdn.net/m0_69848498/article/details/138303410

需求效果：实现交错布局，每个模块高度随内容自己撑开

方法一：多栏布局实现瀑布流

使用CSS的多栏布局可以轻松实现瀑布流效果。以下是具体的CSS属性：

• column-count: 设置共有几列
• column-width: 设置每列宽度，列数由总宽度与每列宽度计算得出
• column-gap: 设置列与列之间的间距
• break-inside: 控制元素是否可以被中断
• auto: 元素可以中断
• avoid: 元素不能中断

下面是具体的CSS示例代码：

<style lang="scss" scoped>
.page{
    .card{
        column-count: 2; // 定义2列
        column-gap: 20px; // 列与列的距离为20px
      .card-item{
        text-align: center;
        width: 45vw;
        grid-row-start: auto; // 自动确定元素的起始行位置
        break-inside: avoid; // 不被截断
      }
    }
}
</style>

注意：多栏布局中子元素的排列顺序是从上往下、从左至右，因此这种方式仅适用于数据固定不变的情况。对于需要滚动加载更多数据的场景，建议使用方法二。

方法二：Flexbox布局

Flexbox布局可以更灵活地实现瀑布流效果，特别适合需要动态加载数据的场景。以下是具体的HTML和CSS代码：

<template>
    <view class="container">
        <view class="colmun">
            <img class="item" :src="i.img" :key="i.id" v-for="i in data1">
        </view>
        <view class="colmun">
            <img class="item" :src="i.img" :key="i.id" v-for="i in data2">
        </view>
        <view class="colmun">
            <img class="item" :src="i.img" :key="i.id" v-for="i in data3">
        </view>
    </view>
</template>
<script setup>
    import data from "./data.json";
    let data1 = [], //第一列
        data2 = [], //第二列
        data3 = [], //第三列
        i = 0;
    while (i < data.length) {
        data1.push(data[i++]);
        if (i < data.length) {
            data2.push(data[i++]);
        }
        if (i < data.length) {
            data3.push(data[i++]);
        }
    }
</script>
<style lang="scss" scoped>
    .container{
        display: flex;
        flex-direction: row;
        .colmun {
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 0 2px;
            .item {
                margin-bottom: 5px;
                width: 100%;
            }
        }
    }
</style>

这种方法通过将数据分配到不同的列中，可以实现动态加载数据时的瀑布流布局效果。