<div class="video-list">
<ul ref="newArray1" class="zq-waterfall-left">
<li @click="toVideo(item)"
v-for="item in newArray1">
<img class="video-img"
:src="item.cover"
alt="">
<p>{{item.title}}</p>
<div class="people"
v-if="item.member">
<img :src="item.member.avatar"
alt="">
<span>{{item.member.nickname}}</span>
</div>
<img class="play"
src="../../../assets/images/home_play@2x.png"
alt="">
</li>
</ul>
<ul ref="newArray2" class="zq-waterfall-right">
<li @click="toVideo(item)"
v-for="item in newArray2">
<img class="video-img"
:src="item.cover"
alt="">
<p>{{item.title}}</p>
<div class="people"
v-if="item.member">
<img :src="item.member.avatar"
alt="">
<span>{{item.member.nickname}}</span>
</div>
<img class="play"
src="../../../assets/images/home_play@2x.png"
alt="">
</li>
</ul>
<div style="height: 3rem"></div>
</div>
css样式
.video-list {
margin: 0.5rem 0.5rem 3.5rem 0.5rem;
text-align: left;
/*display: flex;*/
ul {
vertical-align:top;
display: inline-block;
/*display: flex;*/
/*flex-direction: column;*/
/*flex-wrap: wrap;*/
width: 48%;
}
li {
position: relative;
display: flex;
flex-direction: column;
background-color: #ffffff;
border-radius: 6px;
margin-bottom: 0.5rem;
overflow: hidden;
}
.play {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
ul:first-child {
margin-right: 0.5rem;
}
p {
font-size: 14px;
color: #333333;
font-weight: bold;
padding: 5px 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.video-img {
width: 100%;
height: auto;
}
.people {
display: flex;
padding: 5px;
img {
flex: 0 0 1.5rem;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin: 0 5px;
}
span {
flex: 1;
line-height: 1.5rem;
margin: 0 5px;
font-size: 11px;
color: #8c8c8c;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
// 图片加载完回调
getImg(url, callback) {
let img = new Image();
img.src = url;
//如果图片被缓存,则直接返回缓存数据
if (img.compltet) {
/* callback(img.width, img.height); */
callback(img.width, img.height, Number(img.height) / Number(img.width));
} else {
//完全加载完毕的事件
img.onload = function() {
/* callback(img.width, img.height); */
callback(img.width, img.height, Number(img.height) / Number(img.width));
};
}
},
getData() {
this.videoList = [];
this.page = 1;
this.isLoadMore = false;
$http
.get("plugin.video-share.frontend.video.getList", { page: this.page }, "load")
.then(response => {
if (response.result === 1) {
this.total_page = response.data.list.last_page;
if (!this.total_page) {
this.total_page = 0;
}
this.videoList = response.data.list.data;
this.newArray1 = [];
this.newArray2 = [];
this.sort(0, this.videoList);
} else {
Toast(response.msg);
this.page = this.page - 1;
this.isLoadMore = false;
}
})
.catch(err => {
console.error(err);
});
},
sort(arg, list) {
let that = this;
let index = arg || 0;
if (list.length > index) {
that.getImg(list[index].cover, function(w, h, r) {
let boxA = document.getElementsByClassName("zq-waterfall-left")[0].clientHeight;
let boxB = document.getElementsByClassName("zq-waterfall-right")[0].clientHeight;
if (boxA <= boxB) {
that.newArray1.push(list[index]);
that.$nextTick(() => {
that.sort(index + 1,list) //加载完再递归
})
} else {
that.newArray2.push(list[index]);
that.$nextTick(() => {
that.sort(index + 1,list)
})
}
});
}
if(list.length-1 == index) {
this.isLoadMore = true;
}
},
两列瀑布流 主要逻辑是先加载完每张图片,然后对比两列的高度,在判断push到哪一列(较短的一列),图片需要在dom元素渲染完再执行下一次递归,不然高度会判断不准确
https://www.jianshu.com/p/e5f2d8c16b57vue使用列表渲染 实现瀑布流布局