vue3实现图片瀑布流展示

在现代Web开发中，瀑布流布局已逐渐成为一种流行的展示方式，特别是在图片展示方面。Vue 3提供了很好的组件化支持，使得我们能够方便地实现一个图片瀑布流展示组件。本文将详细讲解如何使用Vue 3来实现一个简单的图片瀑布流。

环境准备

首先，确保你的开发环境中已经安装了Vue 3。如果还没有，可以通过Vue CLI快速创建一个新的项目：

npm install -g @vue/cli
vue create waterfall-demo
cd waterfall-demo
npm run serve

组件设计

我们需要创建一个Waterfall组件来实现瀑布流布局。在这个组件中，我们将使用CSS Grid来实现图片的排列。接下来，我们将在src/components目录下创建一个名为Waterfall.vue的文件。

Waterfall.vue

<template>
  <div class="waterfall">
    <div
      class="waterfall-item"
      v-for="(item, index) in images"
      :key="index"
    >
      <img :src="item" alt="图片" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Waterfall',
  props: {
    images: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.waterfall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.waterfall-item img {
  width: 100%;
  height: auto;
  display: block;
}
</style>

这里，我们使用了CSS Grid来创建一个响应式的瀑布流布局。grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));表示将列数根据容器的宽度动态计算，最小宽度为200px。

使用 Waterfall 组件

接下来，在src/App.vue中使用这个Waterfall组件。

<template>
  <div id="app">
    <h1>图片瀑布流展示</h1>
    <Waterfall :images="imageList" />
  </div>
</template>

<script>
import Waterfall from './components/Waterfall.vue';

export default {
  components: {
    Waterfall
  },
  data() {
    return {
      imageList: [
        'https://via.placeholder.com/300x200?text=Image+1',
        'https://via.placeholder.com/300x200?text=Image+2',
        'https://via.placeholder.com/300x200?text=Image+3',
        'https://via.placeholder.com/300x200?text=Image+4',
        'https://via.placeholder.com/300x200?text=Image+5',
        'https://via.placeholder.com/300x200?text=Image+6',
        // 可以添加更多图片链接
      ]
    }
  }
}
</script>

<style>
#app {
  text-align: center;
  padding: 20px;
}
</style>

在这里，我们导入并使用了Waterfall组件，并通过imageList来传递图片数组。你可以替换为真实的图片链接。

完善功能

我们可以进一步扩展这个组件。例如，如果需要实现图片懒加载，可以使用Intersection Observer API。以下是实现图片懒加载的简单示例：

修改 Waterfall.vue

<template>
  <div class="waterfall">
    <div
      class="waterfall-item"
      v-for="(item, index) in images"
      :key="index"
      ref="items"
    >
      <img v-if="isVisible(index)" :src="item" alt="图片" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Waterfall',
  props: {
    images: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      visibleIndexes: []
    };
  },
  mounted() {
    this.setupObserver();
  },
  methods: {
    setupObserver() {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const index = Array.from(this.$refs.items).indexOf(entry.target);
            if (!this.visibleIndexes.includes(index)) {
              this.visibleIndexes.push(index);
            }
            observer.unobserve(entry.target);
          }
        });
      });

      this.$refs.items.forEach(item => {
        observer.observe(item);
      });
    },
    isVisible(index) {
      return this.visibleIndexes.includes(index);
    }
  }
}
</script>

<style scoped>
/* 此处CSS同之前 */
</style>

在上面的代码中，我们使用IntersectionObserver来检测图片所在的DOM元素是否出现在视口中，并决定是否加载该图片。不需要立即加载所有图片，有效地提高了性能。

总结

通过本篇文章，我们实现了一个简单的Vue 3图片瀑布流展示组件，并介绍了如何完善它的功能，如懒加载处理。使用这些基本的技术和思路，我们可以更进一步设计出更复杂、更具响应性的布局。希望这篇文章对你有帮助！