我的第二篇博客（vue中的瀑布流插件 vue-waterfall-easy）
vue-waterfall-easy是一款很好的瀑布流插件
以下是代码
转载自GitHub的官方文档
https://github.com/lfyfly/vue-waterfall-easy
以下是代码
<template>
<div style="position: absolute; bottom: 0;top: 50px;width: 100%; margin-bottom: 60px;">
<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"></vue-waterfall-easy>
</div>
</template>
<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
import axios from 'axios'
export default {
name: "fishHistory2",
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()
}
}
</script>
<style scoped>
</style>
以下是模拟接口的静态文件 data.json
[
{
"src": "./static/img/1.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/2.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/3.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/4.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/5.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/6.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/7.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/8.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/9.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/10.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/11.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/12.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/13.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/14.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/15.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/16.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/17.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/18.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/19.jpg",
"href": " /test",
"info": "一些图片描述文字"
},
{
"src": "./static/img/20.jpg",
"href": " /test",
"info": "一些图片描述文字"
}
]