瀑布流

最新推荐文章于 2024-11-15 10:26:30 发布
Ryeol
最新推荐文章于 2024-11-15 10:26:30 发布
阅读量129
点赞数
本文链接：https://blog.youkuaiyun.com/Ryeol/article/details/108472172
版权
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div {
            background: pink;
            width: 200px;
            position: absolute;
            transition: 0.5s;
        }

        img {
            width: 100%;
            height: 100%;
        }

        span {
            display: none;
        }

        .cover {
            display: block;
            font-weight: 900;
            position: absolute;
            top: 0px;
            text-align: center;
        }
    </style>
</head>

<body>

    <script type="text/javascript">
        //1.初始化，每一次刷新页面的时候，会生成20个div  
        //2.且等宽不等高  高度是个随机数   
        //3.div盒子也是随机的
        //4.div盒子之间都是有间隔的 10px  第一排top 0px  
        //5.思考每一排最多能够放置多少个div盒子    取决于窗口的宽度



        //1.刷新的时候出现20个固定的盒子
        //生成盒子的
        createDiv();

        function createDiv() {
            for (var i = 0; i < 20; i++) {
                var div = document.createElement('div');
                //需要给div的高度  随机的  数字规则  50-350之间
                var rnd = Math.floor(Math.random() * 300 + 50);
                div.style.height = rnd + "px";
                // div.innerHTML = i;
                //将盒子插入文档中  js遍历
                document.body.appendChild(div);

                //16.加入图片
                // var img = document.createElement('img');
                // img.setAttribute('src', "img/"+i+".jpg");
                // div.appendChild(img);

                //17.鼠标悬浮
                var span = document.createElement('span');
                span.innerHTML = "我是图片" + i;
                div.appendChild(span);

                var aDiv = document.getElementsByTagName('div');
                var Span = document.getElementsByTagName('span');
                for (let t = 0; t < aDiv.length; t++) {
                    aDiv[t].onmouseover = function () {
                        Span[t].setAttribute('class', 'cover');
                    }
                    aDiv[t].onmouseout = function () {
                        Span[t].setAttribute('class', '');
                    }
                }
            }
            change()
        }

        //2.瀑布流布局
        function change() {
            //3.知道第一排最多排多少  且要获取所有的div
            var aDiv = document.getElementsByTagName('div');
            //4.窗口的宽度
            var windowCW = document.documentElement.clientWidth;
            //5.获取一行最多排多少div   留一个10像素间距  向下取整
            var n = Math.floor(windowCW / 210);
            //6.窗口在改变的时候  也是出现效果   终止函数
            if (n <= 0) {
                return
            };
            //7. 盒子居中  获取左右两侧的间距
            var center = (windowCW - n * 210) / 2;
            //8.这个时候高度都是随机的  定义一个数组用来存放数组的高度
            var arrH = [];
            //9.循环所有的盒子
            for (var i = 0; i < aDiv.length; i++) {
                //10.定义一个变量 存放数组的下标 j  
                var j = i % n;
                //11.当第一排排满  第二排从最矮的排起来，从矮到高   肯定会有有一个判断
                //当第一排排满  这个时候 arrH 就有了7个高
                if (arrH.length == n) {
                    //得到最矮的下标
                    var min = findMin(arrH);
                    console.log(min)
                    //这个时候就是排第二排   最矮的下标min
                    aDiv[i].style.left = center + min * 210 + "px";
                    aDiv[i].style.top = arrH[min] + 10 + "px";
                    arrH[min] += aDiv[i].offsetHeight + 10;
                } else {
                    //12.获取到div的高度  存储到数组arrH中
                    arrH[j] = aDiv[i].offsetHeight;
                    aDiv[i].style.left = center + 200 * j + 10 * j + "px";
                    aDiv[i].style.top = 0;
                }
            }
        }


        //13.找到最矮height的下标
        function findMin(arr) {
            // 用第m个和第n比较  
            var m = 0;
            for (var i = 0; i < arr.length; i++) {
                //通过Math.min(x,y);  找出最小值
                m = Math.min(arr[m], arr[i]) == arr[m] ? m : i;
            }
            return m;
        }

        //14.滚动条滚动继续生成div
        window.onscroll = function () {
            //当滚动条滚动距离加上可视区高度   >=  文档的高度
            //可视区的高度
            var windowHeight = document.documentElement.clientHeight;
            //文档滚动的距离
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //页面的高度
            var srcollH = document.body.scrollHeight;
            if (windowHeight + scrollTop >= srcollH) {
                createDiv();
            }
        }

        //15.当窗口改变也调用函数
        window.onresize = function () {
            createDiv();
        }
    </script>



</body>

</html>