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