使用原生js实现瀑布式加载图片

1、首先设置好容器，每张图片的宽度设置为固定宽度，高度自适应

	<div id="main">
		<div  class="box">
			<img src="images/0.jpg" />
		</div>
                …………
                …………
    </div>

2、根据电脑分辨率，每排显示的图片数量不同，然后根据图片数量计算出容器的宽度

	var oParent = document.getElementById(parent);
	var oKids = getKidsByClassName(parent,clsName);
	var okW = oKids[0].offsetWidth+15; //每一个子元素所占的宽度
	var num = Math.floor(document.documentElement.clientWidth/okW);//屏幕最多能放多少列
	var mainW = okW*num;
	oParent.style.cssText = "width:"+mainW+"px;margin:0 auto"; //让整个容器居中

 3、将容器看成几个列组成，将第一排的列的高度存储在hArr数组中，之后每一个元素都要查找hArr中最低列放置，并修改列的值

	var hArr = [];
	for(var i = 0; i<oKids.length;i++){
		if(i<num){
			hArr.push(oKids[i].offsetHeight+15); //把第一排的列高放进去
		}else{
			var minH = Math.min.apply(null,hArr); //找出一列中列高最小的 下一个元素就放在这一列
			var minIndex = hArr.indexOf(minH);
			var left = (oKids[i].offsetWidth+15)*minIndex;
			oKids[i].style.cssText = "position:absolute;top:"+minH+"px;left:"+left+"px;"; //将元素设置成绝对定位，设置top left值
			hArr.splice(minIndex,1,minH+oKids[i].offsetHeight+15); //修改列高
		}
	}

4、实现图片动态加载，通过监听滚动事件，当最高列的最后一个元素露出一半高度时动态加载图片

function checkHeight(){
	var oParent = document.getElementById("main");
	var oKids = getKidsByClassName("main","box");
	var lastKid = oKids[oKids.length-1];
	var lastH = lastKid.offsetTop+Math.floor(lastKid.offsetHeight/2);//最后一个元素漏出一半高度
	var scrollH =document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性 滚动的高度
	var screeH = document.body.clientHeight || document.documentElement.clientHeight;//页面高度
	return lastKid < scrollH+screeH; //当最后一个元素露出一半时 开始加载其他元素

}

 

	window.onscroll = function(){
		if(checkHeight){//当最后一个元素露出一半时 开始加载其他元素
			var oParent = document.getElementById("main");
			for(var i = 0;i<dataInt.data.length;i++){
				var oDiv = document.createElement("div");
				oDiv.className = "box";
				oParent.appendChild(oDiv);
				var oImg = document.createElement("img");
				oImg.src = "images/"+dataInt.data[i].src;
				oDiv.appendChild(oImg);
			}
			waterfall("main","box"); //调整格式
		}
	}

实现效果（第一次录屏，所以录得不好0~0）

代码地址：https://github.com/Steven37/Waterfall.git