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
    评论
这里是一个简单的 JavaScript 瀑布实现的代码,可以供您参考: ```html <!DOCTYPE html> <html> <head> <title>瀑布示例</title> <style> #container { width: 800px; margin: 0 auto; } .item { width: 380px; margin: 10px; padding: 10px; border: 1px solid #ccc; float: left; background-color: #f0f0f0; } </style> </head> <body> <div id="container"> <div class="item">这是第一个瀑布元素</div> <div class="item">这是第二个瀑布元素</div> <div class="item">这是第三个瀑布元素</div> ... <div class="item">这是最后一个瀑布元素</div> </div> <script> window.onload = function() { var container = document.getElementById('container'); var items = container.getElementsByClassName('item'); var columns = 3; // 3列 var column_heights = [0, 0, 0]; // 列高度初始化为0 for (var i = 0; i < items.length; i++) { var shortest_column = 0; for (var j = 1; j < columns; j++) { if (column_heights[j] < column_heights[shortest_column]) { shortest_column = j; } } items[i].style.left = (shortest_column * 400) + 'px'; // 400是item的宽度加上margin的宽度 items[i].style.top = column_heights[shortest_column] + 'px'; column_heights[shortest_column] += items[i].offsetHeight + 20; // 20是item的margin-top和margin-bottom的高度 } } </script> </body> </html> ``` 这个代码实现了一个简单的瀑布布局,包含了3列,每列宽度固定为380px,每个元素之间有10px的margin。代码中使用了JavaScript来计算每个元素的位置,首先初始化每列的高度为0,然后依次遍历每个元素,找到当前高度最短的列,将元素放在该列下面,更新该列的高度。元素的位置使用CSS的left和top属性来控制。 当然,这只是一个简单的瀑布实现,实际上还有很多细节需要考虑,比如异步加载图片、滚动加载等等。如果您需要实现一个完整的瀑布布局,建议使用现成的库或框架,比如Masonry、Isotope等等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值