WEB前端极简版瀑布流

网站前端开发参考文献 前端开发私活网站 前端开发私活网站

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title></title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        u {
            list-style: none;
            margin: 0 auto;
            position: relative;
            top: 0;
            left: 0;
        }
        #u>li {
            position: absolute;
            font-size: 50px;
            background-color: black;
            width: 200px;
            border: 1px solid white;
            color: white;
        }
    </style>
</head>
<body>
    <ul id=”u”>
    </ul>
    <script type=”text/javascript”>
        function randH(min, max) {
            return Math.floor(Math.random() * (max – min + 1) + min);
        };
        var oU = document.getElementById(“u”);
        // 根据自己的documentElement.clientWidth 计算出你有多少列
        var cols = parseInt(document.documentElement.clientWidth / 200);
        // 初始化列高数组
        var arrH = [];
        for (var i = 0; i < cols; i++) {
            arrH[i] = 0;
        }
        // 用for循环生成20个小块
        for (var n = 0; n < 20; n++) {
            var li = document.createElement(“li”);
            li.innerHTML = n;
            li.style.height = randH(100, 300) + “px”;
            // 求最短列 冒泡比法
            var minH = arrH[0];
            var index1 = 0;
            for (var j = 0; j < arrH.length; j++) {
                if (minH > arrH[j]) {
                    minH = arrH[j];
                    index1 = j;
                }
            }
            // 定位li
            // 定位li 的left
            li.style.left = index1 * 200 + “px”;
            li.style.top = arrH[index1] + “px”;
            alert(index1);
            oU.appendChild(li);
            // 更新最短列高度数组
            arrH[index1] += li.offsetHeight;
            alert(arrH[index1]);
        };
    </script>
</body>
</html>

网站前端开发收入怎样 前端网站开发兼职 前端开发的技术架构设计

» 本文来自:前端开发者 » 《WEB前端极简版瀑布流》
» 本文链接地址:https://www.rokub.com/5453.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!