---

---

前言

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

---

一、效果

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

二、使用代码

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

<TBody
        refresher
        :data="goodsList"
        :is-end="isEnd"
        :is-loading="isLoading"
        :is-refreshing="isRefreshing"
        @refresh="reset"
        @lower="fetchGoodsNextPage"
      >
        <TTMultiColumnList
          class="bg-#fafafa goods"
          column-gap="16rpx"
          :list="[]"
          :column-size="2"
          @ready="updateColumnOperator"
        >
          <template #default="{ data, index }">
            <view
              class="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