Vue等高滝流+ドロップダウンロードデータ+クリック画像拡大表示(pc端)

需要:等高滝流+ドロップダウンロード+クリック画像拡大
社長は需要を発表して、高い滝の流れを待つ写真を展示する必要があります.こんなに簡単で、勝手にプラグインを作ればいいわけではありませんが、vue-waterfall、vue-waterfall-easy、vue-waterfall 2を試した後、どれだけ少ないか需要に迎合できないことに気づいたので、自分で手書きすることにしました.
================================================
画像表示用は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;
}

2枚の効果図を貼って、アニメーションをロードして私は貼っていないで、自分で手書きです