uniapp瀑布流最简单的实现方法

一、效果

二、代码

        下列代码复制粘贴直接可以用，注意图片高度不要写死，image的mode应为widthFix，这是为了让图片高度自己撑开，LazyListItem组件为自己的业务代码，方案实现原理为css3的分栏布局

<template>
	<view class="layout_lazy">
		<LazyListItem v-for="item , index in mockData" :key="index" :item></LazyListItem>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import LazyListItem from './LazyListItem.vue';
	const mockData = ref([
		'https://img2.baidu.com/it/u=3409103166,1174784345&fm=253&app=138&f=JPEG?w=800&h=1734',
		'https://img.155175.com/d/file/shouyou/ico/20201227/wga5wgsnd4r.jpg',
		'https://inews.gtimg.com/om_bt/Ojy0PdDIWWXRTAMh2QjsiumDZh-D1x7qCkDSmoaaX6INAAA/641',
		'https://img1.baidu.com/it/u=2991172543,3576519688&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=734',
		'https://www.gywb.com.cn/upload/news/image/2024/03/12/1710229081060006094.png?h=1920&w=1080',
		'https://pic.rmb.bdstatic.com/bjh/3f136a9989/240528/950018d5faa65d6f3fdb076741e1fa53.jpeg',
		'https://inews.gtimg.com/om_bt/ODwP4d0lrmrwPtmpGU1D6ppY5p_7XfFut8cNJ0EGcUpzAAA/641',
	])
</script>

<style lang="scss" scoped>
	.layout_lazy {
		margin-top: 20rpx;
		column-count: 2;
		column-gap: 10rpx;
	}
</style>