原生js实现瀑布流

<ul class="list-ul yu_cf">
<li class="item"></li>
</ul>

js部分

<script type="text/javascript" src=water.js"></script>
		<script type="text/javascript">
			new Waterfall({
				el: "list-ul",
				column: 4,
				gap: 10
			});
		</script>

// 采用IIFE模式防止变量污染全局
;
(function() {
	var Waterfall = function(opt) {
		// 获取页面的DOM元素和参数值
		this.el = document.getElementsByClassName(opt.el)[0]
		//排序元素
		this.oItems = this.el.getElementsByTagName('li')
		//一排几个
		this.column = opt.column
		//间距
		this.gap = opt.gap
		//元素宽度 = （总宽度 - 中间间隔 ）/ 一行几个元素
		this.itemWidth = (this.el.offsetWidth - this.gap * (this.column - 1)) / this.column
		// 保存每一排的高度
		this.heightArr = []
		// console.log(this.itemWidth);
		this.init()
	}

	Waterfall.prototype.init = function() {
		this.render()
	}

	Waterfall.prototype.render = function() {
		var item = null,
			minIndex = -1
		for (var i = 0; i < this.oItems.length; i++) {
			item = this.oItems[i]
			item.style.width = this.itemWidth + 'px'

			if (i < this.column) {
				// 第一排元素的设置
				//顶部
				item.style.top = '0px'
				//距离左边
				item.style.left = i * (this.itemWidth + this.gap) + 'px'
				//高度数组里添加 高度
				this.heightArr.push(item.offsetHeight)
			} else {
				// 其余各排 每个图片放在高度最下的下面
				minIndex = getMinIndex(this.heightArr)
				// 每一列左值相同
				item.style.left = this.oItems[minIndex].offsetLeft + 'px'
				// 高度值等于 上一排的高度加上gap值
				item.style.top = this.heightArr[minIndex] + this.gap + 'px'
				this.heightArr[minIndex] = this.heightArr[minIndex] + item.offsetHeight + this.gap
			}
			
		}
		
		this.el.style.height = Math.max.apply(null, this.heightArr) + 'px'
		console.log('heightArr',Math.max.apply(null, this.heightArr))
		// 函数过去数组中最小数的index 
		function getMinIndex(arr) {
			return arr.indexOf(Math.min.apply(null, arr))
		}

	}
	// 挂载到全局使用
	window.Waterfall = Waterfall
})();

忘了在哪抄来的，增加了一个外框的高度。this.el.style.height = Math.max.apply(null, this.heightArr) + 'px'