建议在把waterfall瀑布流组件也加uni-appx-uvue上

当然可以，将瀑布流组件集成到基于uni-app和uView的项目中，可以极大地提升用户体验，特别是在展示图片或商品列表时。下面是一个简单的瀑布流组件实现代码示例，你可以根据自己的需求进行调整和扩展。

首先，确保你的uni-app项目已经安装了uView UI框架。如果还没有安装，可以通过以下命令安装：

npm install uview-ui --save

然后，在你的pages.json中引入uView：

"easycom": {
    "autoscan": true,
    "custom": {
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    }
}

接下来，创建一个瀑布流组件文件Waterfall.vue，内容如下：

<template>
  <view class="waterfall">
    <view class="column" v-for="(column, index) in columns" :key="index">
      <view v-for="(item, idx) in column" :key="idx" class="item">
        <image :src="item.imgSrc" mode="aspectFill" class="img"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [[], [], []] // 初始化三列瀑布流
    };
  },
  methods: {
    addItem(imgSrc) {
      let shortestColumn = 0;
      for (let i = 1; i < this.columns.length; i++) {
        if (this.columns[i].length < this.columns[shortestColumn].length) {
          shortestColumn = i;
        }
      }
      this.columns[shortestColumn].push({ imgSrc });
    }
  },
  mounted() {
    // 模拟数据添加
    const imgList = [
      'https://example.com/img1.jpg',
      'https://example.com/img2.jpg',
      // ...更多图片链接
    ];
    imgList.forEach(src => this.addItem(src));
  }
};
</script>

<style scoped>
.waterfall {
  display: flex;
  justify-content: space-between;
}
.column {
  flex: 1;
  margin: 5px;
}
.item {
  margin-bottom: 10px;
}
.img {
  width: 100%;
  height: auto;
}
</style>

最后，在你的页面文件中引入并使用这个瀑布流组件：

<template>
  <view>
    <Waterfall />
  </view>
</template>

<script>
import Waterfall from '@/components/Waterfall.vue';

export default {
  components: {
    Waterfall
  }
};
</script>

以上代码实现了一个简单的三列瀑布流布局，并展示了如何添加图片到瀑布流中。你可以根据实际需求调整列数、样式和数据来源。