//#瀑布流
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();
