Vue 瀑布流组件

这是一款超轻量级的瀑布流组件,无需预设高度,支持PC和移动端。

安装

npm i vue-waterfall-plugin -S

使用

import Waterfall from "vue-waterfall-plugin";
<Waterfall 
 :list="list" 
 :gutter="10" 
 :width="240" 
 :gridWidth="gridWidth"
 :breakpoints="{
 1200: { //当屏幕宽度小于等于1200
 rowPerView: 4,
 },
 800: { //当屏幕宽度小于等于800
 rowPerView: 3,
 },
 500: { //当屏幕宽度小于等于500
 rowPerView: 2,
 }
 }"
 backgroundColor="rgb(73, 74, 95)" 
 ref="waterfall"
 >
 <template slot="item" slot-scope="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,
 }
}