响应式瀑布流

水深无声 2023-06-05 08:07 4阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        ul, li {
            list-style: none;
            box-sizing: border-box;
        }
        ul {
            /* width: 600px; */
            border: 5px solid silver;
            border-radius: 8px;
            margin: 0 auto;
            padding: 15px;
            display: flex;
        }
        li {
            width: 200px;height: 300px;
            background-color: rgb(0, 162, 255);
            padding: 10px;
        }
        li>div {
            text-align: center;
            font-size: 50px;
            color: white;
        }
        </style>
    </head>
    <body>
        <ul class="list"></ul>
        <script>
            var list = document.querySelector(".list");
            // 列的数组，列创建完后才赋值
            var liArr;
            var ha = [];
            // 根据当前可视窗口宽度计算列的数量
            // 减去margin padding，是li的可用宽度
            var bw = document.body.clientWidth - 30 - 20;
            // 下舍入，因为能放3.9个实际上会只能放下3个
            // 总宽度除当前宽度
            var n = Math.floor(bw/200);
            // 创建对应个数的列，创建对应的高度数组
            for(var i = 0; i < n ; i++){
                var newLi = document.createElement("li");
                console.log(list);
                console.log(newLi);
    
                list.appendChild(newLi);
                // ha承接所有列的高度，刚创建时初始高度为0
                // 创建几列，push几次
                ha.push(0);
            }
            liArr = document.querySelectorAll("ul li");
            // 找到ha数组中最小的元素，确定下标
            // function getMinIndex(){
         
            //     // 假设ha第一个元素是最小值，把他和其他元素分别比较，如果小于其他值，覆盖
            //     var min = ha[0];
            //     for(var j = 0 ; j < ha.length; j++){
         
            //         min = min < ha[j] ? min : ha[j];
            //     }
            //     // 返回最小值的下标
            //     return ha.indexOf(min);
            // }
            // 以上代码比较值，可优化为直接比较索引的值
            function getMinIndex(){
                var mi = 0;
                for(var j =1; j <ha.length;j++){
                    mi = ha[mi] < ha[j] ? mi : j;
                }
                return mi;
            }
    
            // 封装随机数函数
            function rn(a,b){
                return Math.round(Math.random()*(b-a)+a);
            }
            // 创建元素 每个元素添加到当前最短的一列中
            for(var x = 0; x < 50; x++){
                // 创建元素
                var el = document.createElement("div");
                // 随机高度，颜色，设置内容
                var h = rn(100,200);
                var bg = "#" + (Math.random()+ "").substr(2,6);
                el.style.height = h + "px";
                el.style.background = bg;
                el.innerHTML = x;
                el.style.lineHeight = h + "px";
                // 找到最矮一列下标，添加到对应列
                var _mi = getMinIndex();
                // 更新ha数组
                liArr[_mi].appendChild(el);
                // 添加刚加进去的元素的高度
                ha[_mi] += h;
            }
           
        </script>
    </body>
    </html>

转载于:https://www.cnblogs.com/sandraryan/p/11388826.html