之前由于css做的瀑布流涉及到排行榜順序問(wèn)題，腦殼里面想到了用定位完成瀑布流渐扮，然后一直在腦袋里面構(gòu)思柑贞，筆記本上話草圖，理清了邏輯就開(kāi)始簡(jiǎn)單實(shí)現(xiàn)了下孔厉，偶爾動(dòng)腦不生銹
<style>
.con{
width: 100%;
position: relative;
border: 1px red solid;
height: 100vh;
}
.con>div{
position: absolute;
width: 50%;
}
.con>div:nth-child(odd){//單數(shù)在左
border: 1px red solid;
left: 0;
}
.con>div:nth-child(even){//雙數(shù)在右邊
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}];//模擬簡(jiǎn)陋數(shù)據(jù)/h為數(shù)據(jù)的高度
for (let i=0;i<data.length;i++){
if(i%2==0){
A.push(data[i].h);//單數(shù)集合--
}else {
B.push(data[i].h);//雙數(shù)集合
}
}
for (let j=0;j<A.length;j++){
if(j<=0){
H[j]=A[j]//計(jì)算當(dāng)前容器top高度
}else {
H[j]=A[j]+H[j-1];
}
O[j]=H[j]-A[j];//減去自身高度得到top高度拯钻，關(guān)鍵代碼不可刪除
}
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數(shù)組得到所有數(shù)據(jù)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++){//遍歷數(shù)據(jù)綁定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
