瀑布流---原创

作者: 在下高姓 | 来源:发表于2020-07-20 22:26 被阅读0次

瀑布流---原创
瀑布流的三种实现
瀑布流布局的学习
iOS瀑布流
「实战」蘑菇街 PC 端首页，瀑布流布局的实现原理与细节技巧
Android RecycleView瀑布流的间隔问题
Swift实现UICollectionView支持多 secti
eyoucms arcpagelist 瀑布流分页列表
瀑布流
瀑布流

之前由于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>

得到效果如下