uniapp 实现瀑布流

要实现瀑布流布局，可以使用uni-app的mescroll-body组件来进行实现。具体步骤如下：

1. 安装mescroll插件：在HBuilderX中，选择项目，右键点击“插件管理”，在搜索框中输入“mescroll”，安装插件。

2. 在要实现瀑布流的页面中引入mescroll-body组件：

<template>
  <view>
    <mescroll-body 
      :up="upCallback"
      :down="false"
      :isLockUp="isLockUp"
      :isLockDown="true"
      :isBoth="false"
    >
      <view class="waterfall">
        <view v-for="(item, index) in list" :key="index" class="waterfall-item">
          <!-- 图片或内容展示 -->
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
  export default {
    components: {
      MescrollBody
    },
    data() {
      return {
        list: [], // 数据列表
        page: 1, // 当前页码
        size: 10, // 每页数据数量
        isLockUp: false // 是否锁定上拉加载
      }
    },
    methods: {
      upCallback() {
        // 上拉加载回调函数
        this.page++;
        this.getData();
      },
      getData() {
        // 获取数据列表
        // ...
      }
    }
  }
</script>

3. 在样式中设置瀑布流布局：

.waterfall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.waterfall-item {
  width: 48%; /* 两列布局 */
  margin-bottom: 20rpx;
}

4. 在getData方法中获取数据，并将数据添加到list中，然后使用isLockUp控制上拉加载的锁定状态。

这样就可以在uni-app中实现瀑布流布局了。