vue瀑布流加载图片
时间: 2023-11-17 14:03:16 浏览: 61
瀑布流是一种常见的网页布局方式,它可以让图片或其他元素以瀑布流的形式呈现在页面上,而不是像传统的网格布局一样排列整齐。在Vue中实现瀑布流加载图片,可以使用第三方库vue-waterfall-easy插件。下面是实现步骤:
1.安装vue-waterfall-easy插件
```javascript
npm install vue-waterfall-easy --save
```
2.在Vue组件中引入vue-waterfall-easy插件
```javascript
import WaterfallEasy from 'vue-waterfall-easy'
```
3.在Vue组件中使用vue-waterfall-easy插件
```javascript
<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组件中设置图片的宽度和高度
```css
img {
width: 100%;
height: auto;
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)