css+js瀑布流布局实现
记录一个瀑布流布局问题的解决过程
最开始使用js实现,将子元素进行绝对定位,根据宽高及顺序判断定位的top与left。
问题:存在新增子元素页面加载不及时的问题,会出现子元素初始状态叠加在一起,计算完成后才能正常显示。
点击查看代码
window.onload = () => {
/* 传入waterfall与pic节点,调用函数waterFall */
waterFall('.waterfall', '.cases-item')
}
// column每行个数
// lineSpace列间距
// rowSpace行间距
function waterFall(waterfall, pic, marginTop=20,lineSpace = 0, rowSpace = 40) {
let column=3
let win_w=$(window).width();
if(win_w>1200){
column=3
} else if(win_w<=1200&&win_w>600){
column=2
}
/*waterfallWidth可视窗口waterfall的宽度 */
var waterfallWidth = document.querySelector(waterfall).offsetWidth
/* 计算每个pic的宽度 */
var line = (column - 1) * lineSpace
var picWidth = parseInt((waterfallWidth - line) / column)
/* 获取所有pic节点 */
var picNode = document.querySelectorAll(pic)
/* 通过for循环完成瀑布流的设置 */
var picArr = []
for (var i = 0; i < picNode.length; i++) {
/* 设置每一个pic的宽度 */
picNode[i].style.width = picWidth + 'px'
/* 获取每一个pic的高 */
// console.log('picNode[i]',picNode[i],picNode[i].clientHeight)
var picHeight = picNode[i].clientHeight
/* 通过判断,区分第一行和非第一行 */
if (i < column) {
/* 给第一行的进行定位 */
picNode[i].style.top = marginTop
picNode[i].style.left = (picWidth + lineSpace) * i+ 'px'
/* 将获取的pic的高push到一个数组记录下来 */
picArr.push(picHeight)
// console.log('picHeight',picHeight)
}else{
/* 在非第一行中,找到数组的最小值 */
var picArrMin=Math.min(...picArr)
// console.log(picArrMin);
/* 获取最小值的索引 */
var mixIndex=picArr.indexOf(picArrMin)
// console.log(mixIndex);
/* 对非第一行的pic进行定位,top为最小值的高,left为pic宽加行间距乘以最小值的索引 */
picNode[i].style.top=(picArrMin+rowSpace+marginTop+marginTop)+'px'
picNode[i].style.left=(picWidth+lineSpace)*mixIndex+'px'
/* 对数组中的最小值进行修改 */
picArr[mixIndex]+=picHeight+rowSpace
}
}
const boxH=Math.max(...picArr)
$(waterfall).css({height:boxH+'px'})
}
再次尝试使用css中的column(多列布局)实现简单的瀑布流排版。
问题:元素默认为竖向排版,新增子元素不是在最下方更新,用户体验不好。
<div class="waterfall">
<div class="item">内容</div>
<div class="item">内容</div>
<div class="item">内容</div>
<div class="item">内容</div>
<div class="item">内容</div>
<div class="item">内容</div>
<div class="item">内容</div>
</div>
css
.waterfall{
column-count: 3;//几列
column-gap: 10px;//间距
.item{
display: inline-block;
width: 100%;
}
}
再次更换为另一种方法,使用flex布局实现,结合css中的:nth-child() 和 order属性,将子元素横向排列。
但需要为父元素固定高度,才能达到效果,最终使用flex布局,结合js为父元素的高度赋值,解决了问题。
当添加子元素时,再次调用获取高度方法,更新父元素高度即可。
布局同上
css
.waterfall{
display: flex;
/* 让内容按列纵向展示 */
// flex-flow: column wrap;
flex-direction:column;
flex-wrap: wrap;
height: 5000px;//初始高度,防止在脚本未加载时布局错乱
/* 强制使内容块分列的隐藏列 */
&::before,
&::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
/* 重新定义内容块排序优先级,让其横向排序 */
&.three{//三列
&:nth-child(3n+1) { order: 1; }
&:nth-child(3n+2) { order: 2; }
&:nth-child(3n) { order: 3; }
}
&.two{//两列
&:nth-child(2n+1) { order: 1; }
&:nth-child(2n) { order: 2; }
}
}
js
function getListHeight(){
//获取当前子项list
let list=document.getElementsByClassName("item")
if(list&&list.length>0){
const heightArr=[0,0,0]
//按顺序获取每列的高度
for(let i=0;i<list.length;i++){
if(i%3===0)heightArr[0]+=list[i].offsetHeight
if(i%3===1)heightArr[1]+=list[i].offsetHeight
if(i%3===2)heightArr[2]+=list[i].offsetHeight
}
//取最大值为父元素设置高度
const maxHeight=Math.max(...heightArr)+50
$(".waterfall").css({height:maxHeight+'px'});
}else{
//没有子项则重置高度
$(".waterfall").css({height:'auto'});
}
}
以上就是全部解决过程,文中flex布局方式参考了如下文章,感谢分享
https://www.cnblogs.com/xiaoxiaomini/p/17240258.html
热门相关:一品侍卫 圣人门徒 扑倒老公大人 酒店供应商 邪王独宠:纨绔异能妃