之前由于css做的瀑布流涉及到排行榜顺序问题，脑壳里面想到了用定位完成瀑布流，然后一直在脑袋里面构思，笔记本上话草图，理清了逻辑就开始简单实现了下，偶尔动脑不生锈
<style>
.con{
width: 100%;
position: relative;
border: 1px red solid;
height: 100vh;
}
.con>div{
position: absolute;
width: 50%;
}
.con>div:nth-child(odd){//单数在左
border: 1px red solid;
left: 0;
}
.con>div:nth-child(even){//双数在右边
border: green solid 1px;
right: 0;
}
</style>
<body>
<div class="con">//容器
</div>
<script>
let A=[],B=[],H=[],M=[],N=[],O=[],P=[];
let data=[{"h":14},{"h":12},{"h":13},{"h":14},{"h":17},{"h":16},{"h":18},{"h":15},{"h":14},{"h":6}];//模拟简陋数据/h为数据的高度
for (let i=0;i<data.length;i++){
if(i%2==0){
A.push(data[i].h);//单数集合--
}else {
B.push(data[i].h);//双数集合
}
}
for (let j=0;j<A.length;j++){
if(j<=0){
H[j]=A[j]//计算当前容器top高度
}else {
H[j]=A[j]+H[j-1];
}
O[j]=H[j]-A[j];//减去自身高度得到top高度，关键代码不可删除
}
for (let j=0;j<B.length;j++){//同上
if(j<=0){
M[j]=B[j]
}else {
M[j]=B[j]+M[j-1];
}
P[j]=M[j]-B[j];
}
for(let j=0;j<O.length;j++){//交叉组合OP数组得到所有数据top高度
let a1 = 2*j;
let b2 = 2*j+1;
N[a1]=O[j];
N[b2]=P[j];
}
for (let i=0;i<data.length;i++){//遍历数据绑定top变量
document.getElementsByClassName("con")[0].innerHTML+=`
<div style="height: ${data[i].h}vw;top:${N[i]}vw">${data[i].h}----${N[i]}</div>
`
}
</script>
得到效果如下
image.png
终极效果
image.png
