uniapp 瀑布流

Uniapp可以使用mescroll-uni这个组件来实现瀑布流。以下是具体步骤：

1. 安装mescroll-uni组件，可以使用以下命令：

npm install mescroll-uni --save

2. 在页面的`<template>`标签中添加`mescroll-uni`组件，例如：

<template>
  <view>
    <mescroll-uni :down="downOption" :up="upOption">
      <view slot="downwarp">下拉刷新的内容</view>
      <view slot="upwarp">上拉加载的内容</view>
      <view slot="empty">没有数据时的提示</view>
      <!-- 瀑布流的内容 -->
      <view class="waterfall-wrapper">
        <view class="waterfall-item" v-for="(item,index) in waterfallData" :key="index">{{item.title}}</view>
      </view>
    </mescroll-uni>
  </view>
</template>

3. 在页面的`<script>`标签中引入`mescroll-uni`组件，并初始化`downOption`和`upOption`参数，例如：

<script>
  import MescrollUni from 'mescroll-uni'
  export default {
    components: { MescrollUni },
    data() {
      return {
        downOption: {
          use: true,
          auto: true,
          callback: this.downCallback
        },
        upOption: {
          use: true,
          auto: false,
          callback: this.upCallback,
          isBounce: false
        },
        waterfallData: [] // 瀑布流的数据
      }
    },
    methods: {
      downCallback() {
        // 下拉刷新的回调函数
        // 获取最新的数据并更新this.waterfallData
        // 调用this.$refs.mescrollUni.endSuccess()结束下拉刷新
      },
      upCallback() {
        // 上拉加载的回调函数
        // 获取更多的数据并更新this.waterfallData
        // 调用this.$refs.mescrollUni.endSuccess()结束上拉加载
        // 调用this.$refs.mescrollUni.endErr()结束上拉加载并提示没有更多数据
      }
    }
  }
</script>

4. 在页面的`<style>`标签中添加`waterfall-item`和`waterfall-wrapper`的样式，例如：

<style>
  .waterfall-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .waterfall-item {
    width: 48%;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    padding: 20rpx;
    box-sizing: border-box;
  }
</style>

这样就可以实现一个简单的uniapp瀑布流效果了。