vue3实现图片瀑布流
时间: 2024-09-27 09:05:16 浏览: 7
在 Vue3 中实现图片瀑布流(也称为 Masonry 或 Grid 组件),通常会使用响应式布局和组件化的思路。以下是一个简要步骤:
1. 引入依赖:首先,你需要安装一些相关的库,如 `vue-masonry-component` 或者自己编写 CSS 来实现瀑布流效果。
```bash
npm install vue-masonry-component
```
2. 创建组件:创建一个新的 Vue3 组件,比如叫 `ImageGrid.vue`,并引入 Masonry 组件的插件。
```html
<template>
<div class="masonry-container">
<transition-group tag="div" :key="item.id" class="grid-item">
<img v-for="(item, index) in items" :src="item.src" :key="index" />
</transition-group>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Masonry from 'vue-masonry-component';
const items = ref([]);
const masonryOptions = {
isFitWidth: true,
columnWidth: '.grid-sizer', // 如果有固定的列宽度
};
setup() {
const initImages = async () => {
// 假设你有一个获取图片数据的 API 调用
const imageData = await fetchImageData();
items.value = imageData;
new Masonry(document.querySelector('.masonry-container'), masonryOptions);
};
onMounted(initImages);
}
</script>
<style scoped>
.masonry-container {
/* 根据实际需求设置样式 */
}
.grid-item {
transition: transform 0.5s ease;
}
</style>
```
3. 更新数据和处理布局:当新数据添加或删除时,需要更新 `items` 数据,并调用 Masonry 的 `reload` 方法以更新布局。
```javascript
methods: {
addItem(item) {
items.value.push(item);
masonryOptions.items = items.value; // 更新 Masonry 的数据源
masonryOptions.reload(); // 重新布局
},
removeItem(index) {
items.value.splice(index, 1);
masonryOptions.items = items.value;
masonryOptions.reload();
},
}
```