JS 定位之瀑布流

 一、思路


1、获取可视容器宽,设置相对定位;
2、设置单个卡片默认宽,高自适应,设置绝对定位;
3、获取卡片DOM实例;
4、根据1/2获取一行可以放多少个卡片(同时按一行卡片个数设置宽自适应);
5、所有的卡片top/left初始化为0;
6、设置第一行的位置,即top=0,left的值,同时获取第一行的卡片高;
7、第二行开始插入卡片,获取第一行高度最小的卡片位置下插入,left同值,同时替换当前高度为当前卡片高度+同位置上面卡片的高度;

二、实现

<div class="main-content">
    <div class="main-content-item">卡片1</div>
    <div class="main-content-item">卡片2</div>
    <div class="main-content-item">卡片3</div>
    <div class="main-content-item">卡片4</div>
    <div class="main-content-item">卡片5</div>
    <div class="main-content-item">卡片6</div>
</div>
.main-content {
    width: 100%;
    height: 100%;
    overfllow: hidden auto;
    position: relative;
    
    &-item {
       width: 350px;
       position: absolute;
       top: 0;
       left: 0;
    }
}
/**
* 数据处理-卡片位置计算
* TODO 数据量大时分页渲染
* */ 
handlerData(){
    // 1、获取容器宽
    let contentWidth = document.getElementsByClassName('main-content')[0].clientWidth;

    // 2、卡片
    let div = document.getElementsByClassName('main-content-item')

    // 初始卡片宽、边距
    let normalWidth = 350 , padding = 16
    
    // 每排可以放多少个
    let page = Math.floor((contentWidth) / normalWidth)

    // 自适应宽
    let nowWidth = contentWidth / page

    // 初始化left、top
    for (let i = 0; i < div.length; i++) {
        div[i].style.cssText= `left:0;top:0;`
    }
    
    let divHeight = []

    // 设置第一排的width、left
    for (let i = 0; i < page; i++) {
        if(!div[i]) break;// 少于1行退出循环
        divHeight.push(div[i].clientHeight)
        div[i].style.cssText = `width:${nowWidth - padding + 'px'};left:${i * nowWidth + 'px'};`
    }
    
    // 大于1行计算top/left/width
    if(div.length <= page) return; 

    // 其他卡片的top、left
    for (let i = page; i < div.length; i++) {
        let min_height = Math.min.apply(Math, divHeight), // 获取到数组中最小top
            min_index = divHeight.indexOf(min_height)// 查找到最小高度卡片的下标
        div[i].style.width = nowWidth - padding + 'px';
        div[i].style.left = div[min_index].style.left // 当前卡片和最小高度卡片的left值相同
        div[i].style.top = min_height + padding + 'px' 
        
        // 替换的高度 = 上一个卡片的top + 最小高度卡片的height + 间隙
        divHeight[min_index] = min_height + div[i].clientHeight + padding
    }
}


 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值