自适应瀑布流

css修饰代码：

<style type="text/css">
			body{
				padding: 0;
				margin: 0;
			}
			#wrap{
				position: relative;
			}
			#wrap div{
				position: absolute;
				border: 1px solid #CECECE;
			}
			img{
				display: block;
				border:none;
			}
		</style>

html结构代码

<div id="wrap">
			<div><img src="img2/1.jpg"></div>
			<div><img src="img2/2.jpg"></div>
			<div><img src="img2/3.jpg"></div>
			<div><img src="img2/4.jpg"></div>
			<div><img src="img2/5.jpg"></div>
			<div><img src="img2/6.jpg"></div>
			<div><img src="img2/7.jpg"></div>
			<div><img src="img2/8.jpg"></div>
			<div><img src="img2/9.jpg"></div>
			<div><img src="img2/2.jpg"></div>
			<div><img src="img2/3.jpg"></div>
			<div><img src="img2/4.jpg"></div>
			<div><img src="img2/5.jpg"></div>
			<div><img src="img2/6.jpg"></div>
			<div><img src="img2/7.jpg"></div>
		</div>

js实现代码：

<script type="text/javascript">
			var data = ["img2/1.jpg","img2/3.jpg","img2/5.jpg"];
			window.onload = window.onresize = function(){
				var oWrap = document.getElementById("wrap");
				var aItems = oWrap.children;
				//取总宽度
				var totalWidth =  oWrap.offsetWidth;
				//单个区块宽度
				var perWidth = aItems[0].offsetWidth;
				//一行的列数
				var cols = Math.floor(totalWidth/perWidth);
				
				//区块的间距
				var mt = ml = 10;
				
				//排第一行区块的位置
				//保存每一列高度的数组
				var arrHei = [];
				for(var i = 0; i < cols; i++){
					aItems[i].style.top = 0;
					aItems[i].style.left = (perWidth+ml)*i + "px";
					arrHei.push(aItems[i].offsetHeight);
				}
				
				//排剩余的区块
				conPos(cols);
				
				function conPos(startNum){
					for(var i = startNum; i < aItems.length; i++){
						aItems[i].style.left = aItems[getMinIndex(arrHei)].style.left;
						aItems[i].style.top = arrHei[getMinIndex(arrHei)] + mt + "px";
						//拍完一个之后，更新数组
						arrHei[getMinIndex(arrHei)] += aItems[i].offsetHeight + mt;
					}
				}
				
				//定义一个取最小值索引的方法
				
				function getMinIndex(arr){
					var minVal = Math.min.apply(null,arr);
					var minIndex = arr.indexOf(minVal);
					return minIndex;
				}
				
		//实现资源持续加载			
				var ch = document.documentElement.clientHeight;
				window.onscroll = function(){
					var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
					if(arrHei[getMinIndex(arrHei)]<ch+scrollTop){
						var str = "";
						data.forEach(function(item){
							str += `<div><img src="${item}"></div>`;
						})
						oWrap.innerHTML += str;
						//对新插入的数据排序
						conPos(aItems.length-data.length);
					}
				}
				
			}
			
			
		</script>