uniapp瀑布流代码怎么写

以下是一个简单的 uniapp 瀑布流代码示例：

<template>
<view class="waterfall">
<view v-for="(item, index) in list" :key="index" class="waterfall-item" :style="{height: item.height + 'px'}">
<image :src="item.src" mode="aspectFill" class="waterfall-img"></image>
</view>
</view>
</template>

<script>
export default {
data() {
return {
list: [
{ src: 'https://picsum.photos/id/1/300/400', height: 400 },
{ src: 'https://picsum.photos/id/2/300/200', height: 200 },
{ src: 'https://picsum.photos/id/3/300/300', height: 300 },
{ src: 'https://picsum.photos/id/4/300/250', height: 250 },
{ src: 'https://picsum.photos/id/5/300/350', height: 350 },
{ src: 'https://picsum.photos/id/6/300/150', height: 150 },
{ src: 'https://picsum.photos/id/7/300/200', height: 200 },
{ src: 'https://picsum.photos/id/8/300/300', height: 300 },
{ src: 'https://picsum.photos/id/9/300/250', height: 250 },
{ src: 'https://picsum.photos/id/10/300/350', height: 350 },
{ src: 'https://picsum.photos/id/11/300/150', height: 150 },
{ src: 'https://picsum.photos/id/12/300/200', height: 200 },
{ src: 'https://picsum.photos/id/13/300/300', height: 300 },
{ src: 'https://picsum.photos/id/14/300/250', height: 250 },
{ src: 'https://picsum.photos/id/15/300/350', height: 350 },
{ src: 'https://picsum.photos/id/16/300/150', height: 150 },
{ src: 'https://picsum.photos/id/17/300/200', height: 200 },
{ src: 'https://picsum.photos/id/18/300/300', height: 300 },
{ src: 'https://picsum.photos/id/19/300/250', height: 250 },
{ src: 'https://picsum.photos/id/20/300/350', height: 350 },
],
};
},
};
</script>

<style>
.waterfall {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 -10px;
}

.waterfall-item {
width: calc(33.33% - 20px);
margin: 0 10px;
box-sizing: border-box;
overflow: hidden;
}

.waterfall-img {
width: 100%;
height: 100%;
}
</style>

这是一个简单的瀑布流布局，使用了 flex 布局和计算宽度的方式来实现。每个 item 的高度是随机生成的，可以根据实际需求进行修改。