封装一个关于瀑布流布局的js

<div id="container">
        <div class="box">
            <div class="wrapper">
                <div class="pic">
                    <img src="picture/1507890171558.jpg">
                </div>
                <p>此处为文字说明</p>
            </div>
        </div>
        <div class="box">
            <div class="wrapper">
                <div class="pic">
                    <img src="picture/1469527124428.jpg">
                </div>
                <p>此处为文字说明</p>
            </div>
        </div>
        <div class="box">
            <div class="wrapper">
                <div class="pic">
                    <img src="picture/1465480542599.jpg">
                </div>
                <p>此处为文字说明</p>
            </div>
        </div>
        <div class="box">
            <div class="wrapper">
                <div class="pic">
                    <img src="picture/1507889635394.jpg">
                </div>
                <p>此处为文字说明</p>
            </div>
        </div>
        <div class="box">
            <div class="wrapper">
                <div class="pic">
                    <img src="picture/1507889635394.jpg">
                </div>
                <p>此处为文字说明</p>
            </div>
        </div>
        <div class="box">
            <div class="wrapper">
                <div class="pic">
                    <img src="picture/1507889974853.jpg">
                </div>
                <p>此处为文字说明</p>
            </div>
        </div>
        <div class="box">
            <div class="wrapper">
                <div class="pic">
                    <img src="picture/1469617598428.jpg">
                </div>
                <p>此处为文字说明</p>
            </div>
        </div>
        <div class="box">
            <div class="wrapper">
                <div class="pic">
                    <img src="picture/1469617598428.jpg">
                </div>
                <p>此处为文字说明</p>
            </div>
        </div>
        <div class="box">
            <div class="wrapper">
                <div class="pic">
                    <img src="picture/1469617598428.jpg">
                </div>
                <p>此处为文字说明</p>
            </div>
        </div>
        <div class="box">
            <div class="wrapper">
                <div class="pic">
                    <img src="picture/1469617598428.jpg">
                </div>
                <p>此处为文字说明</p>
            </div>
        </div>

    </div>


<script>
    window.onload = function () { // 一定要页面加载完成再调用 第一个值传递的是id，第二个值传递的是class
        waterFall.init('container', 'box');
    }
    window.onresize = function () { // 这里是窗口改变时的调用 第一个值传递的是id，第二个值传递的是class
        waterFall.init('container', 'box');
    }
</script>


<script>
var waterFall = {
    init: function (container, box) {
        var windowWidth = window.innerWidth;
        var oContainer = document.getElementById(container);
        oContainer.style.width = windowWidth > 1000 ? 1000 + 'px' : windowWidth + 'px'; //当窗口宽度为大于1000时，取1000，其他取窗口值
        var oBoxs = oContainer.getElementsByClassName(box);
        var boxWidth = oBoxs[0].offsetWidth;
        var col = oContainer.offsetWidth / boxWidth; // box列数
        var arrHeight = []; // 用来记录每列已添加box的高度
        for (var i = 0; i < oBoxs.length; i++) {
            oBoxs[i].style.position = "absolute"; // 给每个box定义布局方式为绝对布局

            if (i < col - 1) { // 第一行
                // console.log(oBoxs[i].offsetHeight);
                arrHeight.push(oBoxs[i].offsetHeight);
                oBoxs[i].style.top = 0;
                oBoxs[i].style.left = i * boxWidth + 'px';
            } else {
                var minBoxHeight = Math.min.apply(null, arrHeight); // 求出arrHeight中最小高度的那一列
                // console.log(minBoxHeight);
                var index = this.getIndex(minBoxHeight, arrHeight); // 获取以上最小高度那列的索引this.getIndex(数值, 数组)
                oBoxs[i].style.top = minBoxHeight + 'px';
                oBoxs[i].style.left = boxWidth * index + 'px';
                arrHeight[index] += oBoxs[i].offsetHeight; // 由于已添加box，所以此处更新arrHeight中已添加box那一列的高度值
                var maxBoxHeight = Math.max.apply(null, arrHeight); //把盒子的高度也设置一下，防止后面有底部却显示不了
                oContainer.style.height = maxBoxHeight + 'px';
            }
        }
    },
    getIndex: function (val, arr) { // 得到索引
        for (var i = 0; i < arr.length; i++) {
            if (val == arr[i]) {
                return i
            }
        }
    }
}
</script>

//要注意的是：盒子的宽度必须用css控制 固定值或百分比，

下面给出一个参考网址:
https://blog.youkuaiyun.com/weixin_44135121/article/details/98629830?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase