使用Vue实现高瀑布流+下拉加载数据+点击图片放大查看

责编:menVScode 2020-09-29 9:53 阅读(88)

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

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


下面代码:(小伙伴们根据自己需求提取,也可以使用插件,毕竟方便,注意我的是等高瀑布流不是等宽!)

图片查看用的是viewer插件,传送门:【vue基于vue2-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;
}

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


标签: Vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码