vue的pc端瀑布流
时间: 2023-11-08 21:02:56 浏览: 48
Vue的PC端瀑布流可以用vue-waterfall-easy插件实现。安装该插件后,可以在vue组件中通过简单的配置即可实现瀑布流效果。
首先,安装vue-waterfall-easy插件:
```
npm install vue-waterfall-easy --save
```
然后在组件中引入该插件,并在template中使用:
```
<template>
<vue-waterfall-easy :col-num="3" :list="imgList">
<template slot-scope="props">
<div class="item">
<img :src="props.item.src" />
</div>
</template>
</vue-waterfall-easy>
</template>
<script>
import VueWaterfallEasy from 'vue-waterfall-easy'
export default {
components: { VueWaterfallEasy },
data() {
return {
imgList: [
{ src: 'http://placehold.it/350x200' },
{ src: 'http://placehold.it/350x230' },
{ src: 'http://placehold.it/350x280' },
{ src: 'http://placehold.it/350x250' },
{ src: 'http://placehold.it/350x220' },
{ src: 'http://placehold.it/350x200' },
{ src: 'http://placehold.it/350x280' },
{ src: 'http://placehold.it/350x200' },
{ src: 'http://placehold.it/350x250' }
]
}
}
}
</script>
```
其中,`:col-num`表示列数,`:list`表示要展示的图片列表。在`slot-scope`中,可以使用`props.item`来获取每一项的数据,从而渲染出相应的内容。