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

贴两张效果图，加载动画我没贴出来，自己手写喔

来源：oschina

链接：https://my.oschina.net/u/4408224/blog/4655412