uni-app、H5实现瀑布流效果封装，列可以自定义

---

---

前言

最近做项目需要实现uni-app、H5实现瀑布流效果封装，网上搜索有很多的例子，但是代码都是不够完整的，下面来封装一个uni-app、H5都能用的代码。在小程序中，一个个item渲染可能出现问题，也通过加锁来解决问题。

---

一、效果

1、下面看一下实现的效果，我这里的商品图片是正方形是固定大小的，如果你想要图片不同效果，也是可以适配的。

二、使用代码

1、下面是封装的组件如何使用

<TBodyrefresher:data="goodsList":is-end="isEnd":is-loading="isLoading":is-refreshing="isRefreshing"@refresh="reset"@lower="fetchGoodsNextPage"><TTMultiColumnListclass="bg-#fafafa goods"column-gap="16rpx":list="[]":column-size="2"@ready="updateColumnOperator"><template #default="{ data, index }"><viewclass="items_content">//这个是你的商品item，自己封装<TTGoodsCellPure:key="index":obj="data"arrangement="imageCenter"@click-item="onClickItem"/></view></template></TTMultiColumnList></TBody>

2、关键是updateColumnOperator方法，需要请求数据的时候把数据放进去渲染。

const goodsListQuery = {limit: 30,offset: undefined as string | undefined,
}
const isLoading = ref(false)
const goodsList = ref<Array<any>>([])
const isEnd