两行css代码实现瀑布流,html,css最简单的瀑布流实现方式且没有缺点!
之前一直使用css,position定位+js原生的方法实现,代码如下
html代码段
<template>
<div class="wrapper">
<div v-for="(value,index) in img" :key="index" class="item">
<img :src="value.pic" />
</div>
</div>
</template>
js代码段
<script>
export default {
data() {
return {
img: []
};
},
created() {},
mounted() {
this.getData();
},
methods: {
// 获取线上数据
getData() {
this.$axios({
url: "https://api.it120.cc/small4/shop/goods/list"
}).then(res => {
this.img = res.data;
// 将回调延迟到下次 DOM 更新循环之后执行
this.$nextTick(this.waterfall);
});
},
// 瀑布
waterfall() {
// 获取元素
let item = document.querySelectorAll(".item");
// 获取可视宽度
let cWidth = document.documentElement.clientWidth;
// 获取元素的宽度
let iwidth = item[0].clientWidth;
// 然后计算可以拜访几列
let columns = parseInt(cWidth / iwidth);
// 声明一个存放高度的数组
let heightArr = [];
for (var i = 0; i < item.length; i++) {
// 如果小于列数 就是定义第一行的图片位置
if (i < columns) {
item[i].style.top = 0 + "px";
item[i].style.left = iwidth * i + "px";
// 将一行图片的高度推进数组
heightArr.push(item[i].clientHeight);
} else {
// 如果大于列数 就是定义第二行的图片位置
// 声明一个最小的index值
let minIndex = 0;
// 声明一个最小高度
let minHeight = heightArr[0];
// 循环高度数组
for (var m = 0; m < heightArr.length; m++) {
if (heightArr[m] < minHeight) {
// 求出最小高度值和最小高度元素的下标
minHeight = heightArr[m];
minIndex = m;
}
}
// 第二行的第一张图片的left值
item[i].style.left = item[minIndex].offsetLeft + "px";
// 第二行的第一张图片的top值
item[i].style.top = minHeight + "px";
// 更新高度数组
heightArr[minIndex] = minHeight + item[i].clientHeight;
}
}
}
}
};
</script>
css代码段
<style scoped lang='scss'>
.wrapper {
width: 100%;
position: relative;
div {
width: 48%;
position: absolute;
img {
width: 100%;
}
}
}
</style>
==================================================================================================================
用两行css代码实现,代码如下
html代码段
<template>
<div class="wrapper">
<div v-for="(value,index) in img" :key="index" class="item">
<img :src="value.pic" />
</div>
</div>
</template>
js代码段
<script>
export default {
data() {
return {
img: []
};
},
created() {},
mounted() {
this.getData();
},
methods: {
// 获取线上数据
getData() {
this.$axios({
url: "https://api.it120.cc/small4/shop/goods/list"
}).then(res => {
this.img = res.data;
});
},
}
};
</script>
最精彩的css代码来了
<style scoped lang='scss'>
.wrapper {
width: 100%;
column-count: 2; //设置分几列
div {
break-inside: avoid;
img {
width: 100%;
}
}
}
</style>