Vue等高瀑布流+下拉加载数据+点击图片放大查看（pc端）

需求：等高瀑布流+下拉加载+点击图片放大

老板发布一个需求，需要做一个等高瀑布流图片展示，
What？这么简单，还不是随随便便弄个插件就好了，在试过vue-waterfall、vue-waterfall-easy、vue-waterfall2后，我发现多多少少不能迎合需求，所以决定自己手写。

=====================================================>
下面代码：（小伙伴们根据自己需求提取，也可以使用插件，毕竟方便，注意我的是等高瀑布流不是等宽！）

图片查看用的是viewer插件，传送门：viewer
2020-10-14修改：viewer图片没有形成图片数组，无法上下翻页
HTML：

//图片显示区域
<div id="content">
    <viewer :images="imgList" class="Mywaterfall" >
	    <div class="image-content" v-for="(img,index) in imgList" :key="index">
	        <img :src="img.url"/>
	    </div>
    </viewer>
</div>
//回到顶部按钮
<el-backtop target="" :bottom="70">
    <el-tooltip content="回到顶部" placement="bottom" effect="light">
        <div class="backtop-div">
            <i class="el-icon-caret-top"></i>
        </div>
    </el-tooltip>
</el-backtop>

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;
}
.Mywaterfall img:hover{
     
  transform:scale(1.05);
  transition:all .3s linear;
  cursor: pointer;
}
/*  回到顶部-CSS*/
.el-backtop{
     
  background: #5485fc !important;
  color: white !important;
  border-radius: 0 !important;
  width: 50px !important;
  height: 50px !important;
}
.backtop-div{
     
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 50px;
}
.el-backtop, .el-calendar-table td.is-today{
     
  color: #5485fc;
}

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