vant移动端瀑布流

Vant是一个基于Vue.js的移动端UI组件库，它提供了丰富的组件和功能，其中也包括了瀑布流组件。下面是一个简单的Vant移动端瀑布流的实现方法：

1.首先，安装Vant组件库：

npm install vant -S

2.在需要使用瀑布流的页面中引入Vant组件库和样式文件：

import Vue from 'vue';import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

3.在页面中使用van-waterfall组件，并传入需要展示的图片列表：

<van-waterfall :column-count="2" :border="false">
  <van-waterfall-item v-for="(item, index) in list" :key="index">
    <img :src="item.src" />
  </van-waterfall-item>
</van-waterfall>

其中，`:column-count`表示瀑布流的列数，`:border`表示是否显示边框。

4.在页面的`data`中定义图片列表：

data() {
  return {
    list: [
      { src: 'https://img.yzcdn.cn/vant/apple-1.jpg' },      { src: 'https://img.yzcdn.cn/vant/apple-2.jpg' },
      { src: 'https://img.yzcdn.cn/vant/apple-3.jpg' },
      { src: 'https://img.yzcdn.cn/vant/apple-4.jpg' },
      { src: 'https://img.yzcdn.cn/vant/apple-5.jpg' },
      { src: 'https://img.yzcdn.cn/vant/apple-6.jpg' },
      { src: 'https://img.yzcdn.cn/vant/apple-7.jpg' },
      { src: 'https://img.yzcdn.cn/vant/apple-8.jpg' },
      { src: 'https://img.yzcdn.cn/vant/apple-9.jpg' },
    ],
  };
},

5.最后，根据需要自定义样式即可。