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>