响应式瀑布流

Posted 2022-08-11 sandraryan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式瀑布流相关的知识，希望对你有一定的参考价值。

https://github.com/sandraryan/practise/tree/master/js/demo

<!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>

以上是关于响应式瀑布流的主要内容，如果未能解决你的问题，请参考以下文章

一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

javascript适合移动端的响应式瀑布流插件实例演示