写了个简单的vue+原生js瀑布流组件
废话不多说,上代码
<template>
<div class="waterfall" :style="{height: waterfallHeight+'px'}">
<div class="image" v-for="item in albumList" :key="item.paId">
<img
class="img"
:src="item.paUrl ? 'https://xxx.xxx.xxx' + item.paUrl : ''"
alt=""
:style="{ width: oneWidth + 'px' }"
/>
</div>
</div>
</template>
<script>
export default {
props: {
albumList: {
type: Array | Object,
default: () => [],
},
},
data() {
return {
oneWidth: 252,//单个图片的宽度,根据实际情况修改
waterfallHeight:0
};
},
mounted() {
this.$nextTick(() => {
this.DomLoad();
});
},
methods: {
DomLoad() {
const detail_left_width =
document.querySelector(".detail_left").offsetWidth;
let rowArr = Array.apply(null, {
length: Math.floor(detail_left_width / this.oneWidth),
}).map((item) => (item = 0));
const imageArr = document.querySelectorAll(".image");
imageArr.forEach((ele, index) => {
const minH = Math.min(...rowArr);
const findindex = rowArr.indexOf(minH);
ele.style.top = rowArr[findindex] + "px";
ele.style.left = findindex * this.oneWidth + "px";
rowArr[findindex] += ele.offsetHeight;
});
this.waterfallHeight = Math.max(...rowArr);
},
},
};
</script>
<style lang="less" scoped>
.waterfall {
position: relative;
.image {
position: absolute;
.img {
height: auto;
display: block;
}
}
}
</style>