瀑布流 封装组件

class Waterfall  {
	constructor(obj) {
		// 获取内容宽度
		this.el = document.querySelector(obj.el).offsetWidth
		// 获取所有的子元素
		this.oItems = document.getElementsByClassName(obj.elChren)
		// 列数
		this.columns = obj.columns
		// 间距
		this.gap = obj.gap
		this.setImgPos()
	}
		 setImgPos() {
			var item,
			oItemsLen = this.oItems.length,
			arr=[],minIdx=-1
			for (let i = 0; i < oItemsLen; i++) {
				item = this.oItems[i]
				// 均分每个元素的宽度
				item.style.width=((this.el - (this.columns - 1) * this.gap) / this.columns ) + 'px';
				// 第一排的元素
				if(i<this.columns){
					// 获取第一排的元素高度
					arr.push(item.offsetHeight);
					item.style.top = 0;
					item.style.left =i* ((this.el - (this.columns - 1) * this.gap) / this.columns+this.gap) + 'px';
				}else{
					// 获取第一排元素的最小高度
					minIdx = this.getMinIdx(arr)
					item.style.left=this.oItems[minIdx].offsetLeft+'px'
					item.style.top = (arr[minIdx]+this.gap)+'px'
					arr[minIdx]+= item.offsetHeight + this.gap
				}
			}
		}
		
		getMinIdx(arr){
			return [].indexOf.call(arr, Math.min.apply(null, arr))
		}
}