瀑布流关键部分

来源：互联网发布：erp系统维护数据库编辑：程序博客网时间：2024/06/06 00:24

瀑布流要求：生成100个颜色、大小不等的li，将其随机放到四列ul中，随机放入的规则是下一个生成的li 必须放在当前最低的ul 中。

瀑布流的想法是判断四列li的高低，最低的优先放置下一次生成的div，这个页面的关键部分在于如何判断四列li的高度

源代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>瀑布流效果</title>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            #content{                width: 1000px;                border: 3px solid red;                margin: 0 auto;                /*overflow: hidden;*/                /*设置弹性容器*/                display: flex;                justify-content: space-between;                /*stretch  默认值拉伸*/                align-items: flex-start;            }            #content > ul{                width: 240px;                padding:4px;                border: 1px solid blue;                /*float: left;*/                list-style-type: none;            }            #content ul > li{                background-color: yellow;                font-size: 100px;                color: white;                text-align: center;                margin-bottom: 5px;            }        </style>    </head>    <body>        <div id="content">            <ul></ul>            <ul></ul>            <ul></ul>            <ul></ul>        </div>    </body>    <script type="text/javascript">        //随机[m,n]的整数        function randomNum (m,n){        return  Math.floor(Math.random() * (n - m + 1) + m);        }        //随机颜色        function randomColor (){            var red = randomNum(0,255);            var green = randomNum(0,255);            var blue = randomNum(0,255);            //rgb(45,34,90);        return  "rgb(" + red + "," + green + "," + blue + ")";        }        //获取 所有的 ul        var uls = document.getElementsByTagName("ul");        for (var i = 0;i < 100;i++) {            //创建li            var li = document.createElement("li");            //随机颜色            li.style.backgroundColor = randomColor();            //随机高度            li.style.height = randomNum(150,500) + "px";            //设置内容            li.innerHTML = i + 1 + "";            //插入到对应的ul中//          uls[0].appendChild(li);           //判断哪个ul的高度低,该次创建的li就插入到此ul中;            var index = 0;//记录低高度的ul的所在下标           for (var j = 0;j < uls.length;j++) {            if (uls[j].offsetHeight < uls[index].offsetHeight) {                index = j;//记录下标            }           }           // debugger;//添加断点 (断点调试)           //添加li到最低的ul中           uls[index].appendChild(li);        }//      for (var i = 0;i < 100;i++) {//          debugger;//添加断点//          console.log(i);//      }    </script></html>

阅读全文

0 0