Vue等高瀑布流+下拉載入資料+點選圖片放大檢視（pc端）

需求：等高瀑布流+下拉載入+點選圖片放大

老闆釋出一個需求，需要做一個等高瀑布流圖片展示，
What？這麼簡單，還不是隨隨便便弄個外掛就好了，在試過vue-waterfall、vue-waterfall-easy、vue-waterfall2後，我發現多多少少不能迎合需求，所以決定自己手寫。

=====================================================>
下面程式碼：（小夥伴們根據自己需求提取，也可以使用外掛，畢竟方便，注意我的是等高瀑布流不是等寬！）

圖片檢視用的是viewer外掛，傳送門：viewer

HTML：

<div id="content">
    <div class="Mywaterfall">
        <div class="image-content" v-for="(img,index) in imgList" :key="index">
            <viewer :images="imgList">
                <img :src="img.url"/>
            </viewer>
        </div>
    </div>
</div>

JS：

methods: {
    getImg(){
      this.request.get('/getImg').then((res)=>{
          this.imgList=res.data
       })
    },
    getImgList(){
        this.request.get('/addImg').then((res)=>{
            res.data.forEach((item)=>{
                this.imgList.push(item)
            })
        })
    }
},
created() {
    this.getImg()
},
mounted() {
    let _this = this;
    window.onscroll = function(){
        let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        if(scrollTop+windowHeight == scrollHeight){
                _this.getImgList()
            }
        }
    }
},

css(重點)

.Mywaterfall {
    display: flex;
    flex-wrap: wrap;
}
.image-content {
    margin: 5px;
    flex-grow: 1;
}
.Mywaterfall img{
    display: block;
    min-width: 100%;
    height: 200px;
    object-fit: cover;
}

貼兩張效果圖，載入動畫我沒貼出來，自己手寫喔