vue3+vant4.0 使用van-list实现图片瀑布流

在前端开发中，图片瀑布流是一种常见的布局方式，可以将图片以瀑布的形式展示在页面上，给用户带来良好的视觉效果。本文将介绍如何使用Vue3和Vant4.0的组件库，结合Van-List组件，实现一个图片瀑布流的效果。

获取图片数据

你可以使用任何方式来获取数据，比如通过接口请求、本地数据等。这里我们简单地使用一个假数据来模拟：

<script setup>
const list = ref([
  {
    url: 'https://example.com/image1.jpg',
    key: '测试'
  },
  {
    url: 'https://example.com/image2.jpg',
    key: '中奖了'
  },
  {
    url: 'https://example.com/image3.jpg',
    key: '中奖了2'
  },
  {
    url: 'https://example.com/image4.jpg',
    key: '中奖'
  }
])
const loading = ref(false)
const finished = ref(false)

const onLoad = () => {
  // 异步更新数据
  // 模拟接口请求，延时1秒钟
  setTimeout(() => {
  // 获取更多的图片数据，追加到列表中
    for (let i = 0; i < 5; i++) {
      list.value.push({
    url: 'https://example.com/image1.jpg',
    key: '测试'
  },
  {
    url: 'https://example.com/image2.jpg',
    key: '中奖了'
  },
  {
    url: 'https://example.com/image3.jpg',
    key: '祝暴富'
  },
  {
    url: 'https://example.com/image4.jpg',
    key: '祝中奖500万'
  })
    }

    // 加载状态结束
    loading.value = false

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}
</script>

创建图片列表

<van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <div class="water-fall">
    <div class="list_item" v-for="(item, index) of list" :key="index">
      <van-image lazy-load :src="item.url" />
      <div class="item-title">{{ item.key }}</div>
    </div>
  </div>
</van-list>

在上面的代码中，我们使用了v-model:loading来控制加载状态，:finished来标识是否加载完成。@load事件将在列表滚动到底部时触发加载更多数据的逻辑。并用lazy-load设置图片懒加载。这个懒加载的前提是要引入 Lazyload 组件。

样式

<style scoped lang="scss">
.water-fall {
  column-count: 2;
  column-gap: 10px;
  width: 100%;
  margin: 0 auto;
  .list_item {
    box-sizing: border-box;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    text-align: center;
    box-shadow: 0 2px 8px 0 hsla(0, 0%, 62.7%, 0.5);
    border-radius: 4px;
    margin-bottom: 15px;
    img {
      width: 100%;
      background-color: #eee;
    }
    .item-title {
      padding: 12px 0;
    }
  }
}
</style>