【瀑布流布局】瀑布流的一个简单案例

最新推荐文章于 2023-01-18 11:07:59 发布

黄色的小仔仔

最新推荐文章于 2023-01-18 11:07:59 发布

阅读量488

点赞数

分类专栏：案列文章标签： javascript html html5

本文链接：https://blog.youkuaiyun.com/liu_xiaoyang/article/details/123139719

版权

案列专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
        }
        ul{
            width: 100%;
            list-style: none;
        }
        li{
            float: left;
            margin-left: 2px;
            margin-right: 2px;
            /* height: 100px; */
            /* width:1px; */
        }
        .cliear::after{
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
            clear: both;
        }
    </style>
</head>
<body>
    <ul class="cliear"></ul>

    <script>
        const COL = 6;
        var ul,lis=[],heightList=[],n=2;

        init()
        function init(){
            ul=document.querySelector("ul");
            for(var i=0;i<COL;i++){
                //创建一个li，
                var li = document.createElement("li");
                //给创建的li赋值宽度
                li.style.width=`calc( ${100/COL}% - 4px )`;
                //将li添加到ul中
                ul.appendChild(li);
                //将创建的每一个li放进数组中，这样这个数组就拿到了所有的li集合
                lis.push(li);
                //刚开始是没有高度的，初始值每一个都是0
                heightList.push(0);
            }
            loadImag();
        }

        function loadImag(){
            //创建img标签
            var img = new Image();
            //将img标签的src赋值
            img.src=`./img/${n}-.jpg`;
            //添加加载事件（预加载）；
            img.addEventListener("load",loadHander);
        }

        //缓存图片完毕后
        function loadHander(e){
            //先清除该事件
            this.removeEventListener("load",loadHander);
            //设置图片的宽度为li宽度的100%；
            this.style.width = "100%";
            //查找heightList数组中最小的那个值
            var min = Math.min(...heightList);
            //取出最小值的那个下标
            var minIndex = heightList.indexOf(min);
            //添加img标签到最小值处
            lis[minIndex].appendChild(this);
            // 然后将该图片的高度存到heightList相应的下标中
            heightList[minIndex]+=this.offsetHeight;
            //更新n；
            n++;
            if(n>79){
                return;
            }
            loadImag();
        }
    </script>
</body>
</html>

效果图如下图所示：