Js实现瀑布流

1.使用原生js实现瀑布流效果,demo地址（https://xukeler.github.io/waterfall/）

2.思路

• 生成的每一个盒子的宽度是固定的，高度在一定的范围内随机。
• 每个盒子的位置通过绝对定位的方式确定。盒子的背景颜色也是随机的。
• 每一列的高度是一直叠加的，父盒子的高度是随着最高的一列来设置的。
• 每个盒子的top值是列的高度，left值是列乘以宽度。
• 每次添加盒子在最短的那一列添加。
• 监听浏览器的滚动事件，滚动到最底层的范围内时，再次添加盒子。

3.由以上思路可以确定一个大概的方向，首先要封装一个随机函数，用来生成随机数。

 function random(a, b) {
            return parseInt(Math.random() * (a - b + 1) + b) //随机函数数b-a范围
        }

4.用一个数组记录高度和列数

let arr = [{
            h: 0,//每一列的高度记录
            col: 0//当前列数以索引记录
        }, {
            h: 0,
            col: 1,
        },
        {
            h: 0,
            col: 2
        }
    ]

5.css代码

 html,
        body {
            height: 100%;
        }

        * {
            padding: 0;
            margin: 0;
        }

        #app {
            width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        #app div {
            width: 380px;
            position: absolute;
            text-align: center;
            color: white;
        }

6.html代码

 <div id="app">

    </div>

7.js代码

let arr = [{
            h: 0,//每一列的高度记录
            col: 0//当前列数以索引记录
        }, {
            h: 0,
            col: 1,
        },
        {
            h: 0,
            col: 2
        }
    ]
    let app = document.getElementById("app");

    function water() {
        let colorStr = "0123456789abcde";

        function random(a, b) {
            return parseInt(Math.random() * (a - b + 1) + b) //随机函数数
        }

        for (let i = 0; i < 30; i++) { //每次添加多少个标签
            let str="#";
            for (let j = 0; j < 6; j++) {//for循环通过随机的索引获取拼接字符串
                str += colorStr.charAt(random(14, 0))
            }
            let node = document.createElement("div");
            let h = random(600, 300); //随机每个div的高度
            node.style.lineHeight = h + "px"; //设置div的行高
            node.style.height = h + "px"; //设置div的高度
            node.innerHTML = "image"; //设置div的内容
            node.style.backgroundColor=str;//设置div的背景颜色
            arr.sort((a, b) => {//从小到到大排序，获取高度最小的一列
                if (a.h > b.h) {
                    return 1
                } else {
                    return -1
                }
            })
            node.style.left = arr[0].col * 400 + "px";//设置left值为列数*指定宽度
            node.style.top = arr[0].h + "px";//设置top值为最小高度+间距
            app.appendChild(node)//插入到容器中
            arr[0].h += (h + 20);//设置最小高度加等于当前div高度和间距
            arr.sort((a, b) => {//再次排序获取最大值
                if (a.h > b.h) {
                    return 1
                } else {
                    return -1
                }
            })
            app.style.height = arr[2].h + "px";//由于是绝对定位，父盒子的高度不能被子元素撑开，所以要设置父盒子的高度为最大的
        }
    }
    water()//初始运行一次
    window.onscroll = function () {//监听滚动事件
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//获取滚动高度
        let ch = window.innerHeight || document.body.clientHeight;//获取窗口的高度
        let H = parseInt(app.style.height)//获取容器的高度
        if (H <= scrollTop + ch + 100) {//判断当容器的高度小于等于滚动高度+窗口高度+100的时候再次运行
            water();
        }
    }