JS实现瀑布流布局
最近在做项目时,要实现瀑布流布局,搜索到很多瀑布流组件,如vue-masonry等等。但是很多组件把滚动分页加载都封装在组件里面,但是我的项目有自己的滚动组件只想送入数据进行展示,这时很多组件的布局就乱掉了。没办法只能最后自己yong用js实现了。
下面具体说说实现思路吧。
实现思路
本次实现的是2列的瀑布流布局,大致思路是将所有的元素设置为absolue
的定位,初始让所有子元素的top
、left
都为0,然后循环计算所有元素的高度,设置leftheight
和rightheight
去保存左右两列的高度,并为每个子元素设置top
。leftheight <= rightheight
时,{ top: leftheight, left: 0px}
,leftheight > rightheight
时,{ top: rightheight, right: 0px}
。最后计算并设置父元素总高度。
实现代码
<div class="layout-content" :style="{height: contentHeight}">
<div class="card-item">
</div>
</div>
.card-item {
width: 50%;
position: absolute;
top: 0px;
// left: 0px;
}
.layout-content {
width: 100%;
position: relative;
}
waterfallComputed () {
// 获取子元素Dom
let domlist = document.getElementsByClassName('card-item')
let top = 0
let leftheight = 0
let rightheight = 0
for (var i =0; i<domlist.length;i++) {
// 获取子元素高度
let height = 0
if (this.list[i].style) {
height = Number(this.list[i].style.height.replace("px", ""))
} else {
height = domlist[i].getBoundingClientRect().height
}
// 计算每个子元素的定位置
if (leftheight <= rightheight) {
this.list[i].style = {
top: leftheight+ 'px',
left: '0px',
height: height + 'px'
}
leftheight = leftheight + height
} else {
this.list[i].style = {
top: rightheight + 'px',
right: '0px',
height: height + 'px'
}
rightheight = rightheight + height
}
}
// 计算并设置父元素总高度
let clientHeight = document.body.clientHeight - 90
let height = Math.max(leftheight, rightheight)
height = Math.max(height, clientHeight)
this.contentHeight = height + 'px'
}
实现效果
如果大家有更好的方法或者组件,欢迎留言交流~