uniapp 实现瀑布流图片

Uniapp 中可以使用 `u-grid` 组件实现瀑布流布局。以下是一个简单的例子：

1. 在页面中引入 `u-grid` 组件：

<template>
  <u-grid :list="images" :column-num="2">
    <template v-slot="{ item }">
      <img :src="item.url" style="width: 100%;" />
    </template>
  </u-grid>
</template>

2. 在页面中定义图片列表数据：

<script>
export default {
  data() {
    return {
      images: [
        { url: 'https://picsum.photos/id/1/300/200' },
        { url: 'https://picsum.photos/id/2/300/400' },
        { url: 'https://picsum.photos/id/3/300/200' },
        { url: 'https://picsum.photos/id/4/300/500' },
        { url: 'https://picsum.photos/id/5/300/200' },
        { url: 'https://picsum.photos/id/6/300/300' },
        { url: 'https://picsum.photos/id/7/300/400' },
        { url: 'https://picsum.photos/id/8/300/200' },
        { url: 'https://picsum.photos/id/9/300/600' },
        { url: 'https://picsum.photos/id/10/300/200' },
        { url: 'https://picsum.photos/id/11/300/400' },
        { url: 'https://picsum.photos/id/12/300/200' },
        { url: 'https://picsum.photos/id/13/300/300' },
        { url: 'https://picsum.photos/id/14/300/400' },
        { url: 'https://picsum.photos/id/15/300/200' },
        { url: 'https://picsum.photos/id/16/300/500' },
        { url: 'https://picsum.photos/id/17/300/200' },
        { url: 'https://picsum.photos/id/18/300/300' },
        { url: 'https://picsum.photos/id/19/300/400' },
        { url: 'https://picsum.photos/id/20/300/200' }
      ]
    }
  }
}
</script>

这样就可以实现一个简单的瀑布流布局。你可以根据需要调整列数和图片数据。注意，`u-grid` 组件需要引入 `uview-ui` 库。