基于vue的固定宽度图片瀑布流组件
<!--
@Description: pictureList 图库列表组件
@Author: sunyongwei
@Date: 2022-10-12
@Version: V1.0
-->
<template>
<div style="margin: 20px;">
<div style="width: 100%;">
<div>
<div style="font-weight: bold;font-size: 16px;">
<span v-for="(item,index) in fullTitle">{{item}}
<span v-if="index<fullTitle.length-1">/</span>
</span>
</div>
<div style="font-size: 10px;color: #767676;">{{list.length}}个文件,共{{(sizeTotle / 1024 / 1024).toFixed(3)}}GB</div>
</div>
</div>
<div id="img-content" class="img-content">
<img
class="img"
:style="'width:' + imgWidth + 'px;'"
v-for="(item, index) in list"
:key="'img' + index"
:src="item.url"
/>
</div>
</div>
</template>
<script>
export default {
name: 'pictureList',
props:{
list:{
type:Array,
default() {
return []
}
},
fullTitle:{
type:Array,
default() {
return ''
}
},
imgWidth: {
type: Number,
default: 100
},
imgMargin: {
type: Number,
default: 3
},
},
data () {
return {
pictureList:[],
screenWidth:1000,
sizeTotle:0
}
},
watch:{
list(){
this.sizeTotle = 0
this.list.forEach(e=>{
this.sizeTotle += e.size
})
},
},
mounted() {
this.screenWidth = document.body.clientWidth;
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth;
this.waterfallHandler()
})();
};
},
created() {
let that = this
setTimeout(function(){
that.waterfallHandler()
},200)
this.list.forEach(e=>{
this.sizeTotle += e.size
})
},
methods: {
waterfallHandler() {
const imgWidth = this.imgWidth + this.imgMargin * 2;
const contentW = this.screenWidth - 500;
const column = parseInt(contentW / imgWidth);
const heightArr = new Array(column).fill(0);
const imgList = document.getElementsByClassName("img");
for (let i = 0; i < imgList.length; i++) {
const item = imgList[i];
const itemHeight = item.offsetHeight;
const minHeight = Math.min(...heightArr);
const minIndex = heightArr.indexOf(minHeight);
item.style.top = minHeight+i+this.imgMargin + "px";
item.style.left = minIndex * imgWidth + "px";
heightArr[minIndex] += itemHeight;
}
}
}
}
</script>
<style scoped >
.img-content {
height: 1200px;
position: relative;
margin: 8px 0px;
}
.img {
position: absolute;
vertical-align: top;
margin: 3px;
}
</style>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d5fac9f513a016e0a56067302a905bbf.png)