不知道大家都是怎么用瀑布流的，一開始嘗試用flex布局失敗，后面找到了這個組件，還是挺好用的，記錄一下。

首先是用npm安裝npm install vue-waterfall-easy --save-dev
然后用import引用

import vueWaterfallEasy from 'vue-waterfall-easy' export default {name: 'app',components: {vueWaterfallEasy} }

在部分我寫的是，除了圖片，下面還有一些描述信息，所以加了插槽，以及手動調用了取消滾動加載
一定要記得在組件上加上ref='waterfall'，否則會undefined的

在 slot-scope="props"的div里，可以自定義修改每個圖片所需要的信息

<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getDataList" class="waterfull" ref='waterfall'><div class="img-info" slot-scope="props"><div class="user"><span>{{props.value.name}}</span><span @click='imgLike(props.value.id,props.value.isDianZan)'><img:src="props.value.isDianZan == 0 ? 'https://g-shot.oss-cn-hangzhou.aliyuncs.com/h5/28ac6d226cb5526e/img/6-32.png': 'https://g-shot.oss-cn-hangzhou.aliyuncs.com/h5/28ac6d226cb5526e/img/6-31.png'"></span></div></div><div slot="waterfall-over">已經到底啦</div></vue-waterfall-easy>

js部分：

import vueWaterfallEasy from './vue-waterfall-easy/vue-waterfall-easy.vue' import axios from 'axios'export default {name: 'app',data() {return {imgsArr: [],group: 0, // request param}},components: {vueWaterfallEasy},methods: {getData() {axios.get('./static/mock/data.json?group=' + this.group) // 真實環境中，后端會根據參數group返回新的圖片數組，這里我用一個驚呆json文件模擬.then(res => {this.imgsArr = this.imgsArr.concat(res.data)this.group++})},},created() {this.getData()} }

這里要注意，存圖片鏈接的關鍵字必須是“src”,所以new了一個類來存所有從接口取到的要用到的值。

export class Img {constructor({id,src,isDianZan,name}) {this.id = idthis.src = srcthis.isDianZan = isDianZanthis.name = name}}export function CreateImg(imgData) {return new Img({id: imgData.id,src: imgData.src,isDianZan: imgData.isDianZan,name: imgData.name})}

總結

以上是生活随笔為你收集整理的vue瀑布流插件vue-waterfall-easy 2.x的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。