<template>
<div>
<div class="box">
<div v-for="(item, index) in dataMenus" :key="index" class="boxItem">
<img :src="item.path" />
</div>
</div>
</div>
</template>
<script>
export default {
props: {
dataMenus: {
type: Array,
default: () => [],
},
},
mounted() {
this.waterFall();
},
methods: {
waterFall() {
var pageWidth = document.querySelector(".box").clientWidth; //页面宽度
var items = document.getElementsByClassName("boxItem"); //获取有多少图片片
var gap = 5; //图片与图片之间的间隙(设置为0的话,会导致底部图片挤压)
// 1.确定1行有多少列 1)获取到页面的宽度 2)获取到每个图片的宽度 3)需要显示的列数=页面宽度/(图片宽度+图片之间的间隔)
// 显示的列数(column)=页面宽度(pageWidth)/(盒子宽度(itemWidth)+间隙(gap))
var itemWidth = items[0].clientWidth; //获取每张图片的宽度
var columns = parseInt(pageWidth / (itemWidth + gap)); //获取列数 = 页面宽度/(图片宽度+图片之间的间隔)
// console.log('pageWidth', pageWidth, itemWidth, columns)
// 定义一个数组arr来保存高度
var arr = [];
for (let i = 0; i < items.length; i++) {
// 排列第一行
if (i < columns) {
// 满足条件则在第一行
items[i].style.top = 0;
items[i].style.left = (itemWidth + gap) * i + "px";
arr.push(items[i].offsetHeight);
} else {
// 排列第二行
var minHeight = arr[0];
var index = 0;
// 找最小高度
for (var j = 0; j < arr.length; j++) {
if (minHeight > arr[j]) {
minHeight = arr[j];
index = j;
}
}
// 设置下一行的第一个盒子的位置
items[i].style.top = arr[index] + gap + "px";
items[i].style.left = items[index].offsetLeft + "px";
arr[index] = arr[index] + items[i].offsetHeight + gap;
}
}
},
},
};
</script>
<style lang="less" scoped>
.box {
height: calc(100vh - 30px);
overflow-y: scroll;
position: relative;
width: 100%;
.boxItem {
width: 100px;
padding: 5px 5px;
position: absolute;
img {
width: 100%;
}
}
}
</style>
1.通过获取屏幕宽度来计算出瀑布流所需要的列数
2.第一列之下的图片通过获取最小高度来填充
<template>
<div>
<watter-fall :data-menus="applicationlist"></watter-fall>
<nav-bar></nav-bar>
</div>
</template>
<script>
import navBar from '@/components/NavBar';
import watterFall from '@/components/WatterFall';
export default {
components: { navBar,watterFall },
name:'shop',
props: {
data: {
type: Array,
default: () => []
},
},
data() {
return {
index: 0,
applicationlist:[
{path:'https://img1.baidu.com/it/u=952600201,3461173534&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=c18a23a50c9d4c21aa52da808837f9c5'},
{path:'https://img2.baidu.com/it/u=2376350185,9700368&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=aa1acc24e4eda8fbb0400c6605a5581a'},
{path:'https://img2.baidu.com/it/u=3877894948,2050135903&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=cfbd3e6dcdca4d8509068d92fda94f83'},
{path:'https://img2.baidu.com/it/u=605054797,2327142606&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=caa58210f19e2190de30ead0aae6d31c'},
{path:'https://img1.baidu.com/it/u=4137997603,1259881509&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=71021269707a0211b00eb20943e85bdc'},
{path:'https://img0.baidu.com/it/u=985235917,3927982578&fm=253&fmt=auto?w=130&h=170'},
{path:'https://img1.baidu.com/it/u=1773922313,1020703787&fm=253&fmt=auto?w=130&h=170'},
{path:'https://img1.baidu.com/it/u=3297175625,3468494859&fm=253&fmt=auto&app=138&f=JPEG?w=688&h=431'},
{path:'https://img1.baidu.com/it/u=1697591426,439251294&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=640'},
{path:'https://img1.baidu.com/it/u=952600201,3461173534&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=c18a23a50c9d4c21aa52da808837f9c5'},
{path:'https://img2.baidu.com/it/u=2376350185,9700368&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=aa1acc24e4eda8fbb0400c6605a5581a'},
{path:'https://img2.baidu.com/it/u=3877894948,2050135903&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=cfbd3e6dcdca4d8509068d92fda94f83'},
{path:'https://img2.baidu.com/it/u=605054797,2327142606&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=caa58210f19e2190de30ead0aae6d31c'},
{path:'https://img1.baidu.com/it/u=4137997603,1259881509&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=71021269707a0211b00eb20943e85bdc'},
{path:'https://img0.baidu.com/it/u=985235917,3927982578&fm=253&fmt=auto?w=130&h=170'},
{path:'https://img2.baidu.com/it/u=2374217666,1840353380&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350'},
{path:'https://img0.baidu.com/it/u=3213897541,1787721034&fm=253&fmt=auto&app=138&f=JPEG?w=641&h=481'},
{path:'https://img2.baidu.com/it/u=2269588034,2603289550&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888'},
{path:'https://img0.baidu.com/it/u=103311479,2172107226&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'},
],
};
},
}
</script>
3.调用组件,使用数据渲染
4.最后效果如下,图片加载需配合懒加载一起使用: