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

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

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

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

1：安装

yarn  add  vue-waterfall2

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

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

3：正式使用

  <div class="container-water-fall case">　　　　　　　　其中case以及case_item是卡片的样式，　　　　　　　　　　　　　　　　
      <waterfall
        :col="col"---------col:划分几列，可以根据屏幕宽度来划分，其类型是数值型
        :gutterWidth="20"
        :data="list"　　　　　　　　list:是请求到的每一页数据，由于分页，获取到的只有当前页数，因此列表循环的时候，使用List,即push上每一次page+1的数据
        @loadmore="loadmore"　　当滑到页面底部后，需要加载新的数据
        :lazyDistance="200"
      >
        <template>
          <div
            class="case_item cell-item"
            v-show="List.length!==0"
            v-for="(item) in List"
            :key="item._id"
          >
            <div class="imgs">
              <img
                src="https://scdn.xidong360.com/201909/a20e2e94d1664992abecab9a03afa1f1.png?x-oss-process=style/thumb"
                class="image"
              />
            </div>
            <div class="case_bottom">
              <h6>俱乐部名称</h6>
              <p>在中台产品的研发过程中，会出现不同的设计规范和实现</p>
              <p style="margin:0;">
                <v-btn class="case_action" small  text color="primary">编辑</v-btn>
                <v-btn class="case_action" small  text color="#aaa">删除</v-btn>
              </p>
            </div>
          </div>
        </template>
      </waterfall>
    </div>

　　方法：

　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++;
      }
},