vue瀑布流加载图片

瀑布流是一种常见的网页布局方式，它可以让图片或其他元素以瀑布流的形式呈现在页面上，而不是像传统的网格布局一样排列整齐。在Vue中实现瀑布流加载图片，可以使用第三方库vue-waterfall-easy插件。下面是实现步骤：

1.安装vue-waterfall-easy插件

npm install vue-waterfall-easy --save

2.在Vue组件中引入vue-waterfall-easy插件

import WaterfallEasy from 'vue-waterfall-easy'

3.在Vue组件中使用vue-waterfall-easy插件

<template>
  <WaterfallEasy :list="list" :columns="3" :gutter="10">
    <template v-slot="{ item }">
      <img :src="item.src" :alt="item.alt" />
    </template>
  </WaterfallEasy>
</template>

<script>
import WaterfallEasy from 'vue-waterfall-easy'

export default {
  components: {
    WaterfallEasy
  },
  data() {
    return {
      list: [
        { src: 'image1.jpg', alt: 'image1' },
        { src: 'image2.jpg', alt: 'image2' },
        { src: 'image3.jpg', alt: 'image3' },
        { src: 'image4.jpg', alt: 'image4' },
        { src: 'image5.jpg', alt: 'image5' },
        { src: 'image6.jpg', alt: 'image6' }
      ]
    }
  }
}
</script>

4.在Vue组件中设置图片的宽度和高度

img {
  width: 100%;
  height: auto;
}