vue中使用vue-waterfall2来实现瀑布流

在很多项目中，会有图文列表或者图片列表的出现，图片宽度好设定，但是高度往往不能设置成定值，一旦图片长款不成比例，就会显得很难看。

所以使用瀑布流可以完美实现这个问题，图片只需要设定宽度，高度自适应，就可以完美实现。

下边我们来说说怎样来实现------------------这个是针对图片以及带文字的卡片

1：安装

yarn  add  vue-waterfall2

2：引用，在main.js中引用

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)

3：正式使用

  
case">　　　　　　　　其中case以及case_item是卡片的样式，　　　　　　　　　　　　　　　　
      col"---------col:划分几列，可以根据屏幕宽度来划分，其类型是数值型
        :gutterWidth="20"
        :data="list"　　　　　　　　list:是请求到的每一页数据，由于分页，获取到的只有当前页数，因此列表循环的时候，使用List,即push上每一次page+1的数据
        @loadmore="loadmore"　　当滑到页面底部后，需要加载新的数据
        :lazyDistance="200"
      >
        
      
    

　　方法：

　1：list与List(只写了部分)

 　　　　　　if (this.page === 1) {
              this.List = [];
              setTimeout(() => {
                this.List = res.data.data;------------当时第一页时，将数据赋值给List
              }, 50);
            } else {
              this.List = this.List.concat(res.data.data);----------当页码大于第一页时，List拼接到后面的数组
            }

　2：col

getcol() {
      if (this.width > 1580) {
        this.col = 4;
      } else if (1024 < this.width < 1580) {
        this.col = 3;
      } else if (768 < this.width < 1024) {
        this.col = 2;
      }
    },

3：loadmore：监听当前页面加载完成-------------该页面使用了watch监听page，因此page++后未调取this.getdata();可根据需要自行调取

loadmore1() {
      if (this.page <= this.length && this.loadmore) {
        this.page++;
      }
},