瀑布流

//#瀑布流
    class Waterfall{
        constructor() {
            this.box = document.querySelectorAll('.box');
            this.count = document.querySelector('.count');
            this.clientW = document.documentElement.clientWidth;
            this.clientH = document.documentElement.clientHeight;
            this.heightArr = []；
            this.url = "接口"；
            this.init();
            this.addEvent();
        }
        init() {
            this.maxNum = parseInt(this.clientW / this.box[0].offsetWidth);
            this.count.style.width = this.maxNum * this.box[0].offsetWidth + 'px';
            this.firstLine();
            this.otherLine();
        }
        firstLine() {
            for(var i = 0; i < this.maxNum; i++) {
                this.heightArr.push(this.box[i].offsetWidth);
            }
        }
        otherLine() {
            for(var i = this.maxNum; i < this.box.length; i++) {
                var min = Math.min.apply(null, this.heightArr);
                //在不改变this的情况下，让Math方法，强行执行一组数组
                var minIdx = this.heightArr.indexOf(min);//求出第一排中最低高度的索引
                this.box[i].style.position = "absolute";
                this.box[i].style.left = minIdx * this.box[0].offsetWidth + 'px';
                this.box[i].style.top = min + 'px';
                this.heightArr[minIdx] += this.box[i].offsetHeight;//重置原本最小值，让之后图片都依次使用
            }
            this.lastTop = this.box[this.box.length-1].offsetTop;
        }
        load() {
            var that = this;
            ajaxGet(this.url,function(res) {
                that.res = json.parse(res.)
                that.display();
            })

        }
        addEvent() {
            onscroll = function() {
                    var scrollT = document.documentElement.scrollTop;
                    if(this.lastTop - scrollT < that.clientH + 200) {
                    that.load();
                    }
            }
        }
        display() {
            var str = '';
            for(var i = 0; i < this.res.length; i++) {
                str += `<div class = "box">
                            <div class = "imgbox">
                                <img src = "${this.res[i].img}" alt="">
                            </div>
                        </div>
                        `;
            }
            this.cont.innerHTML += str;
            this.heightArr = [];
            this.box = document.querySelectAll(".box");
            this.firstLine();
            this.otherLine();

        }
    }
    new Waterfall();