原生js实现瀑布流

瀑布流效果主要步骤分为
1.排好第一行
2.找出最小高度，往下排
3.最小高度更新
4.数据后续添加，找到最小值，加载数据
js代码如下：

<script type="text/javascript">
			var data = ["img2/1.jpg","img2/5.jpg","img2/9.jpg","img2/1.jpg","img2/5.jpg","img2/9.jpg","img2/1.jpg","img2/5.jpg","img2/9.jpg","img2/1.jpg","img2/5.jpg","img2/9.jpg","img2/1.jpg","img2/5.jpg","img2/9.jpg","img2/1.jpg","img2/5.jpg","img2/9.jpg"];
			function WaterFall(id){
				this.oWrap = document.getElementById(id);
				this.items = this.oWrap.children;
				this.ml = this.mt = 10;//间距
				//排列出第一行，第一行排多少个
				this.perWidth = this.items[0].offsetWidth+this.ml;//每个的总宽度
				this.cols = Math.floor(this.oWrap.offsetWidth/this.perWidth);//排出来的列数
				this.arrHei = [];//空数组存放每一列的宽度
				this.init();//执行排第一行
				this.confirmOthers(this.cols);
				this.addData();//滚动条滚动添加数据
			}
			//排第一行
			WaterFall.prototype.init = function(){
				for(let i = 0;i < this.cols;i++){
					this.items[i].style.top = 0;
					this.items[i].style.left = i*this.perWidth + "px";
					this.arrHei.push(this.items[i].offsetHeight);//取第一行的高度
				}
			}
			//取最小高度
			WaterFall.prototype.getMinindex = function(arr){
				var minVal = Math.min.apply(null,arr);//apply方法取最小值
				var minIndex = arr.indexOf(minVal);//取最小索引
				return minIndex;
			}
			//排其它的
			WaterFall.prototype.confirmOthers = function(num){//
				for(let i = num;i < this.items.length; i++){//从第一行之后开始
					this.minIndex = this.getMinindex(this.arrHei);//取最小索引
					this.minVal = this.arrHei[this.minIndex];//取出对应最小值
					
					this.items[i].style.left = this.items[this.minIndex].style.left;//left值与最小值的那列相同
					this.items[i].style.top = this.minVal + this.mt + "px";//top值为最小值+间距
					
					//插入后更新数组
					this.arrHei[this.minIndex] += this.items[i].offsetHeight + this.mt; 
				}
			}
			//添加新数据的函数
			WaterFall.prototype.addData = function(){
				window.onscroll = ()=>{//浏览器滚动取到最小高度
					var st = document.documentElement.scrollTop || document.body.scrollTop;
					var ch = document.documentElement.clientHeight;
					
					var minVal = this.arrHei[this.getMinindex(this.arrHei)];//取临界值
					if(st + ch > minVal){
						for(let i = 0; i <data.length; i++){
							var oDiv = document.createElement("div");
							oDiv.innerHTML = `<img src = "${data[i]}">`;
							this.oWrap.appendChild(oDiv);
						}
						//每一次增加数据块之后，this.items.length会增加
						this.confirmOthers(this.items.length - data.length)
					}
				}
			}
			
			//资源加载完毕和尺寸改变
			window.onload = window.onresize = function(){
				new WaterFall("wrap");
			}
		</script>