<template>
<div class="secondary_wrap_box_hidden">
<!--预渲染,用于计算该模块的实际高度-->
<div class="count-box">
<div class="one-info"
v-for="(curr,key,index) in dataObj"
:key="key">
<template v-if="index==0">
<div class="item"
v-for="(item,index) of dataList"
:key="index">
<img :src="item.img"
alt="">
<p v-html="item.title"></p>
</div>
</template>
</div>
</div>
<!--展示给用户的模块-->
<div class="show-box"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled">
<div class="one-info"
v-for="(curr,key) in dataObj"
:key="key">
<div class="item"
v-for="(item,index) of dataObj[key].list||[]"
:key="index">
<img :src="item.img"
alt="">
<p v-html="item.title"></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
imgData: [],// imgData本地模拟数据 [{},{}]形式，可自行模拟
count: 0, //用于模拟下拉加载更多
dataList: [], //记录待渲染的列表数据，在count-box中计算实际高度
dataObj: {
0: {
list: [],
height: 0
},
1: {
list: [],
height: 0
},
2: {
list: [],
height: 0
},
3: {
list: [],
height: 0
}
}, //分列保存计算好的列表数据，height为当前高度，list为渲染数据
disabled: true //控制下拉加载是否执行，使用element-ui
}
},
mounted () {
// 实际情况为拉取接口获取列表数据
this.imgData = [{ "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=102321575,511125942&fm=26&gp=0.jpg", "title": "舌尖上的<strong>美食</strong>专题" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1177964470,479031676&fm=26&gp=0.jpg", "title": "<strong>美食</strong>新花样:每天换着花样吃,总有一款是你喜欢的菜" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3850388535,1167207852&fm=26&gp=0.jpg", "title": "木偶葡式<strong>美食</strong>餐厅" }, { "img": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1134784869,3896009723&fm=26&gp=0.jpg", "title": "芽庄<strong>美食</strong>-春卷" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2274317971,1991118550&fm=26&gp=0.jpg", "title": "看着就咽口水家常<strong>美食</strong>,一口下去很美味,家庭聚会少不了!" }, { "img": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3356844394,2271561381&fm=26&gp=0.jpg", "title": "凯宾斯基元素餐厅,当贵阳遇上墨西哥,拉开一场<strong>美食</strong>与" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2521473907,3034345160&fm=26&gp=0.jpg", "title": "小吃照片图片大全图片 精致<strong>美食</strong>图片大全图片" }, { "img": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1623160426,1989983192&fm=26&gp=0.jpg", "title": "小吃照片图片大全图片 精致<strong>美食</strong>图片大全图片" }, { "img": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3789376532,220740491&fm=26&gp=0.jpg", "title": "佛罗伦萨特色<strong>美食</strong> t骨牛排" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2343148560,2821942974&fm=26&gp=0.jpg", "title": "看到你嘴馋 高清晰<strong>美食</strong>壁纸" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1507547397,333458129&fm=26&gp=0.jpg", "title": "广东<strong>美食</strong>多不胜数,你吃过的有多少?" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3762496946,2461284874&fm=26&gp=0.jpg", "title": "蚌埠特色当地<strong>美食</strong> 蚌埠十大名菜" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2291605549,2231893190&fm=26&gp=0.jpg", "title": "<strong>美食</strong>图片大全高清图片" }, { "img": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2068529103,1848299236&fm=26&gp=0.jpg", "title": "<strong>美食</strong> 1158_800" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1411954962,357219716&fm=26&gp=0.jpg", "title": "【特色泰宁】泰宁大金湖,尚书第,厦门,鼓浪屿,客家土楼 卧飞7日游" }, { "img": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=159501217,3112009683&fm=26&gp=0.jpg", "title": "薄家特色炒鸡面前天下<strong>美食</strong>尽失色" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2961727119,1785817788&fm=26&gp=0.jpg", "title": "企鹅酒店里的<strong>美食</strong>琳琅满目,汇集中西美食为一体,让您享受一站即可" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1528360192,3283152269&fm=26&gp=0.jpg", "title": "地方<strong>美食</strong>" }, { "img": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2176865605,3840169309&fm=26&gp=0.jpg", "title": "<strong>美食</strong>摄影 美食静物 马卡龙系列2" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=296821258,3516286117&fm=26&gp=0.jpg", "title": "探寻青海<strong>美食</strong>:好吃的可真不是一点半点" }, { "img": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3220167539,1723052210&fm=26&gp=0.jpg", "title": "干 锅 鸡 <strong>美食</strong> 网 做法 1080_662" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1324497751,718099150&fm=26&gp=0.jpg", "title": "中餐<strong>美食</strong>背景图" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3150719987,3314894563&fm=26&gp=0.jpg", "title": "史上最高逼格的曼谷<strong>美食</strong>攻略!" }, { "img": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1944451557,1663972702&fm=26&gp=0.jpg", "title": "舌尖上的中国<strong>美食</strong>_舌尖上的中国小吃菜谱" }, { "img": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=379895550,2286813034&fm=26&gp=0.jpg", "title": "高清<strong>美食</strong>壁纸 (32)" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=120872693,2602966491&fm=26&gp=0.jpg", "title": "猪儿粑是四川兴文的一种特色<strong>美食</strong>" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1887882765,3459663936&fm=26&gp=0.jpg", "title": "中华<strong>美食</strong>宣传展板psd分层素材" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=389722003,3857830846&fm=26&gp=0.jpg", "title": "享誉全球的中国<strong>美食</strong>排行榜" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3104270868,2009215419&fm=26&gp=0.jpg", "title": "40张诱人的<strong>美食</strong>摄影作品" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=17257692,269916416&fm=26&gp=0.jpg", "title": "【纸上的<strong>美食</strong>】山城重庆,连天气都是麻辣味" }]
this.dataList = this.imgData
// 保证DOM初始化完成，操作数据
this.$nextTick(() => {
this.waterFall();
})
},
methods: {
load () {
if (this.count > 4) {
return
}
this.dataList = this.imgData
this.$nextTick(() => {
this.waterFall();
})
this.disabled = true
},
waterFall () {
// 保存外部this
let that = this
$(".count-box .item").each(function (i) {
// 内部this指向当前遍历DOM
// 假设当前最小高度的一列是第一列，min为当前最小高度
let index = 0
let min = that.dataObj[0].height
let arr = Object.keys(that.dataObj)
// 从第二列开始遍历，获取拥有最小高度的列
for (let idx = 1; idx < arr.length; idx++) {
if (min > that.dataObj[idx].height) {
min = that.dataObj[idx].height
index = idx
}
}
// 将当前数据放进最小列，更新最小列高度
that.dataObj[index].height = that.dataObj[index].height + $(this).height()
that.dataObj[index].list.push(that.dataList[i])
});
// 实际情况是根据接口中结束标志位判断是否可以触底加载新数据
this.disabled = false;
// 数据处理完毕，清空代处理列表
this.dataList = []
// 本地用于模拟下拉测试的
this.count++
},
},
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/_handle.scss";
.show-box,
.count-box {
width: 900px;
height: 100%;
margin: 0 auto;
overflow-x: hidden;
overflow-y: auto;
display: flex;
justify-content: space-around;
.one-info {
flex: 1;
height: auto;
box-sizing: border-box;
padding: 0 5px;
.item {
width: 100%;
transition: 0.25s;
border: 1px solid;
margin-bottom: 10px;
img {
width: 100%;
height: auto;
display: block;
opacity: 0;
transition: 0.25s;
}
&:hover {
img {
transition: 0.25s;
animation: bounceIn 0.25s ease-in 2 alternate;
}
}
p {
line-height: 22px;
}
}
}
}
// count-box 不展示给用户
.count-box {
height: 1px;
overflow: auto;
position: absolute;
}
@keyframes bounceIn {
100% {
transform: scale(1.07);
}
}
</style>
