uniapp瀑布流布局

在uni-app中，可以使用uni-ui组件库中的waterfall瀑布流组件来实现瀑布流布局。以下是一个简单的示例：

1. 首先，在项目中安装uni-ui组件库：

npm install @dcloudio/uni-ui

2. 在需要使用瀑布流布局的页面中引入waterfall组件：

<template>
  <view class="container">
    <waterfall :data-source="list" :column-count="2">
      <template slot="default" slot-scope="{ item }">
        <!-- 展示项的内容 -->
        <view class="item">{{ item.title }}</view>
      </template>
    </waterfall>
  </view>
</template>

<script>
import { waterfall } from '@dcloudio/uni-ui';

export default {
  components: { waterfall },
  data() {
    return {
      list: [
        { title: 'item 1', imageUrl: '...' },
        { title: 'item 2', imageUrl: '...' },
        { title: 'item 3', imageUrl: '...' },
        // ...
      ]
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}
.item {
  width: 50%;
}
</style>

在上面的示例中，我们使用了uni-ui组件库中的waterfall组件，并将数据源传递给了它。同时，我们还指定了列数为2，并在模板中使用了 slot="default" 来定义展示项的内容。最后，我们还为每个展示项设置了一个宽度为50%的样式。

需要注意的是，如果你的uni-app项目是基于vue-cli创建的，那么在引入uni-ui组件库时，需要在babel.config.js文件中添加以下配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      { libraryName: '@dcloudio/uni-ui', customName: (name) => `@dcloudio/uni-ui/lib/${name}/${name}` }
    ]
  ]
}

这样做的目的是避免uni-ui组件库的按需引入功能无法正常工作。