瀑布流关键部分

最新推荐文章于 2023-10-28 17:47:12 发布

noobFrontEnd

最新推荐文章于 2023-10-28 17:47:12 发布

阅读量254

点赞数

分类专栏：前端 javascript 难点复盘

本文链接：https://blog.csdn.net/github_33777703/article/details/75148903

版权

前端同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 0 订阅

订阅专栏

难点复盘

3 篇文章 0 订阅

订阅专栏

本文介绍了瀑布流布局的实现方法，重点在于如何动态判断四列的高度以确保元素能正确填充。关键在于每次生成新的元素时，必须将其放入当前四列中最矮的一列。通过相关代码展示了解决方案，前四个元素按顺序从左到右排列。

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

瀑布流要求：生成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>

noobFrontEnd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流关键部分

瀑布流要求：生成100个颜色、大小不等的li，将其随机放到四列ul中，随机放入的规则是下一个生成的li 必须放在当前最低的ul 中。瀑布流的想法是判断四列li的高低，最低的优先放置下一次生成的div，这个页面的关键部分在于如何判断四列li的高度
复制链接

扫一扫

专栏目录