瀑布流

<style>
    
    .cont{margin: 0 auto;position: relative;}
    .box{float:left;padding: 6px;}
    .imgbox{border: solid 1px black;border-radius: 6px;padding: 6px;}
    .imgbox img{width:200px;display: block;}

</style
<script
    onload = function(){
        new WaterFall();
    }
    
    function WaterFall(){
        this.box = document.querySelectorAll(".box");
        this.cont = document.querySelector(".cont");

        this.clientW = document.documentElement.clientWidth;

        // 页面的可视区域
        this.clientH = document.documentElement.clientHeight;
        
        // 1.有数据
        this.data = [{"src":"images/1.jpg"},{"src":"images/2.jpg"},{"src":"images/3.jpg"},{"src":"images/4.jpg"},{"src":"images/5.jpg"},{"src":"images/6.jpg"},{"src":"images/7.jpg"},{"src":"images/8.jpg"},{"src":"images/9.jpg"},{"src":"images/10.jpg"}];

        this.init();
        // 2.绑定滚动事件
        this.addEvent();
    }
    WaterFall.prototype.addEvent = function(){
        var that = this;
        onscroll = function(){
            // 3.判断页面是否到底
            if(that.isBottom()){
                // console.log(that.data)
                // 4.使用数据渲染页面
                var str = "";
                for(var i=0;i<that.data.length;i++){
                    str += `<div class="box">
                                <div class="imgbox">
                                    <img src="${that.data[i].src}" alt="">
                                </div>
                            </div>`;
                }
                that.cont.innerHTML += str;

                // 5.重新渲染瀑布流:重新获取所有元素，重置数组，重新定位
                that.box = document.querySelectorAll(".box");
                that.firstLine();
                that.otherLine();

              
            }
        }
    }
    WaterFall.prototype.init = function(){
        this.maxNum = Math.floor(this.clientW / this.box[0].offsetWidth)
        this.cont.style.width = this.maxNum * this.box[0].offsetWidth + "px";
        this.firstLine();
        this.otherLine();
    }
    WaterFall.prototype.firstLine = function(){
        this.heightArr = [];
        for(var i=0;i<this.maxNum;i++){
            this.heightArr.push(this.box[i].offsetHeight)
        }
    }
    WaterFall.prototype.otherLine = function(){
        for(var i=this.maxNum;i<this.box.length;i++){
            this.box[i].style.position = "absolute";
            var min = getMin(this.heightArr);
            var minIndex = this.heightArr.indexOf(min);
            this.box[i].style.left = minIndex * this.box[0].offsetWidth + "px";
            this.box[i].style.top = min + "px";
            this.heightArr[minIndex] += this.box[i].offsetHeight;
        }
    }
    WaterFall.prototype.isBottom = function(){
        // 滚动的距离
        this.scrollT = document.documentElement.scrollTop;
        // 页面的总高度
        // this.scrollH = document.documentElement.scrollHeight;
        // 最后一个元素的top
        this.lastT = this.box[this.box.length-1].offsetTop;
        
        return (this.clientH + this.scrollT > this.lastT);
    }


    function getMin(arr){
        var a = JSON.parse(JSON.stringify(arr));
        return a.sort((a,b)=>a-b)[0];
    }
</script>

<div class="cont">
    <div class="box">
        <div class="imgbox">
            <img src="images/4.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/3.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/5.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/6.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/7.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/8.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/9.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/10.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/4.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/3.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/5.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/6.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/7.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/8.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/9.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/10.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/5.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/6.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/7.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/8.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/9.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/10.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/5.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/6.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/7.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/8.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/9.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/10.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/5.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/6.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="imgbox">
            <img src="images/7.jpg" alt="">
        </div>