npm i vue-waterfall-plugin -S
import Waterfall from "vue-waterfall-plugin";
<Waterfall
:list="list"
:gutter="10"
:width="240"
:breakpoints="{
1200: { //当屏幕宽度小于等于1200
rowPerView: 4,
},
800: { //当屏幕宽度小于等于800
rowPerView: 3,
},
500: { //当屏幕宽度小于等于500
rowPerView: 2,
}
}"
animationEffect="fadeInUp" // 这里默认是fadeIn,其余的效果需要自己引入animation.css之后才能使用,也可以自己写animation
backgroundColor="rgb(73, 74, 95)"
ref="waterfall"
>
<template v-slot:item="props">
<div class="card">
<img :src="props.data.src" alt="" @load="$refs.waterfall.refresh">
...
</div>
</template>
</Waterfall>
breakpoints: {
1200: { //当屏幕宽度小于等于1200
rowPerView: 4,
},
800: { //当屏幕宽度小于等于800
rowPerView: 3,
},
500: { //当屏幕宽度小于等于500
rowPerView: 2,
}
}