Vue项目中 vue-waterfall-easy 瀑布流框架使用

1、Installation（安装）

进入到项目当前文件夹，执行命令：

npm install vue-waterfall-easy --save

2、引入vue-waterfall-easy

2.1、main.js中引入

import vueWaterfallEasy from 'vue-waterfall-easy'

2.2、当前vue文件包含组件

export default {
  name: 'app',
  components: {
    vueWaterfallEasy
  }
    //省略其他代码
}

 3、HTML中引入组件

<div id="content">
    <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"></vue-waterfall-easy>
</div>

3.1、页面布局显示（*重点，有可能页面不可见）

#content块必须设置为

 #content{
  position: absolute;    /*必须*/
  top:32px;              /*top必须，大小可控制*/
  bottom:0;              /*bottom必须，一直延申到当前块底部*/
  width:100%;
}

4、vue-resource获取后端数据并显示在页面

export default {
  name: 'morePicture',
  components: {
    vueWaterfallEasy
  },
  data() {
    return {
      imgsArr: [],
      group: 0, // 当前加载的加载图片的次数
    }
  },
  methods: {
    getData() {
  this.$http.post('http://119.23.71.203:8080/edu/image/eduschoolimageinfo/queryPageList', { 'companyKey': "1" }).then(res => {
        this.group++;
        if (this.group === 10) {
          // 模拟已经无新数据，显示 slot="waterfall-over"
          this.$refs.waterfall.waterfallOver()
          return
        }
        var dataList = res.data.data.dataList;
        console.log(dataList);
        console.log(Array.isArray(dataList));
        for (let v of dataList) {
          var picObj = {
            "src": "./..",
            "href": "",
            "info": ""
          }
          picObj["src"] += v.imageUrl;
          picObj["href"] = v.imageKey;
          picObj["info"] = v.imageName;
          this.imgsArr = this.imgsArr.concat(picObj);
        }
      }).catch((res) => {
        console.log(res);
      });
    }
  },
  created() {
    this.getData();
    // 删除某个卡片
    // setTimeout(()=>{
    //   this.imgsArr.splice(1,1)
    // },2000)
  },
  mounted() {}
}

5、遗留问题

仍然布局问题，整个组件在移动端没有问题，但是在PC端浏览器中最大化时，页面渲染瀑布流部分遮挡，布局针对整个窗口进行改变。可能由于插件中计算样式依据document，而不是根据当前父元素布局计算。