需求：等高瀑布流+下拉加載+點擊圖片放大
老板發布一個需求，需要做一個等高瀑布流圖片展示，
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;
}貼兩張效果圖，加載影片我沒貼出來，自己手寫喔
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/140398.html
標籤：其他
下一篇：復習遞回和拷貝案例