前端js实现瀑布流（简单版）

最新推荐文章于 2024-07-25 15:03:56 发布

加勒比海鸡_

最新推荐文章于 2024-07-25 15:03:56 发布

阅读量173

点赞数 5

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44040206/article/details/137387501

版权

本文介绍了如何使用JavaScript和jQuery实现一个瀑布流布局，通过维护多个对象记录每列的高度，当添加新元素时找到当前最小高度并调整元素位置。

摘要由CSDN通过智能技术生成

如题，主要思想就是有几列，就有几个对应的对象来记录每一列的列标和对应列目前的高度。比如有4列，每次有新元素添加时都计算4列中哪个目前高度是最小的，就将元素的top值为这个最小的高度值，同时更新这个最小值的top即加上要添加元素的高度（未考虑外边距）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{
        width: 100vw;
        /* border: 1px solid red; */
        height: 100vh;
    }
    .conatiner_inner{
        border: 1px green solid;
        width: 1700px;
        height: auto;
        margin:  0 auto;
        position: relative;
    }
    .item{
        border: 1px red solid;
        position: absolute;
    }
    
</style>
<body>
    <div class="conatiner">
        <div class="conatiner_inner">
        </div>
    </div>



    <script src="./JQuery-min-3.7.1.js"></script>
    <script>
        

        $(function(){
            var heightDiv = [400,450,500,550,600,650,700,750,800,850] // 随机的高度
            var row = 4 // 列数
            var width = 400 // 每列宽度（固定）
            var d= {} // 每列记录数据的对象
         
            for(let i = 1;i<=row;i++){ // 有几列d对象就有几个参数，如demo是4列，参数名就是1-4 
                d[i]={row:i,top:0} // 例如 d[1]={row:i,top:0} d[2]={row:i,top:0} ... d[n]={row:i,top:0} ps：默认一开始top都是0
            }
            
            // d[1].top=400
            // d[2].top=300
            // d[3].top=500
            // d[4].top = 600
            // alert(d[1].top)
            for(let i =1;i<=10;i++){ // 模拟瀑布流元素数量
                

                var random = Math.floor(Math.random()*10+1) // 随机数取高度集合 随机范围1-10，对应上方heightDiv的length长度
                var pos = {top:d[1].top,row:d[1].row,index: 1} // 临时变量用来存储每次要放元素时查找最小高度，默认数据是第一个对象

                for(var j = 1+1;j<=row;j++){

                    if(pos.top> d[j].top ){ // 比大小，比临时变量小的就赋值，目的就是查出最小的高度和第几列
                        pos.top = d[j].top
                        pos.row = d[j].row        
                    }
                }

                d[pos.row].top = d[pos.row].top+heightDiv[random-1] // 找出最小高度和相应的列后，给对应的最小高度和相应的列的d对象增加要加入元素的高度 ps：pos.row已经顺便记录是哪几列了，可以直接拿来当做对象参数使用


                

                var element = `<div class="item" style="width:400px;height:${heightDiv[random-1]}px;left:${width*(pos.row-1)}px;top:${pos.top}px"> ${heightDiv[random-1]}</div>` //构造元素

                $('.conatiner_inner').append(element)
            }
      
       
        })
    </script>
</body>
</html>

在这里插入图片描述

加勒比海鸡_

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端js实现瀑布流（简单版）

如题，主要思想就是有几列，就有几个对应的对象来记录每一列的列标和对应列目前的高度。比如有4列，每次有新元素添加时都计算4列中哪个目前高度是最小的，就将元素的top值为这个最小的高度值，同时更新这个最小值的top即加上要添加元素的高度（未考虑外边距）
复制链接

扫一扫