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

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

方法一

multi-column 多栏布局实现瀑布流

• column-count: 设置共有几列
• column-width: 设置每列宽度，列数由 总宽度与每列宽度计算得出
• column-gap: 设置列与列之间的间距

break-inside: auto | avoid

• 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>

注意： multi-column布局中子元素的排列顺序：从上往下 从左至右，所以这种方式仅适用于数据固定不变的情况，对于滚动加载更多等可动态添加数据的情况就并不适用了，可以参考方法二。

方法二

Flexbox布局:

<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>