瀑布流的实现

window.onload=function(){

	getE('main','box');

	var dataint={'data':[{'src':'0.png'},{'src':'1.png'},{'src':'2.png'},{'src':'3.png'},{'src':'4.png'},{'src':'5.png'}]}

	window.onscroll=function(){
		if(sfons){
			var oparent=document.getElementById('main');
			for(var i=0;i<dataint.data.length;i++){
				var cb=document.createElement('div');//创建一个div
				cb.className='box';//加一个box class属性
				oparent.appendChild(cb);//添加到oparent的尾部
				var cp=document.createElement('div');
				cp.className='pic';
				cb.appendChild(cp);
				var ci=document.createElement('img');
				ci.src='./img/'+dataint.data[i].src;
				cp.appendChild(ci);
			}
			getE('main','box');
		}
	}
}
function getE(parent,box){
	//将mian下的box取出来
	var oparent=document.getElementById(parent);
	var boxl=getbcls(oparent,'box');
	//获取一个盒子的宽度，看可以分成几列
	var boxw=boxl[0].offsetWidth;
	var clus=Math.floor(document.documentElement.clientWidth/boxw);
	//设置main的宽
	oparent.style.cssText=''+clus*boxw+'px;margin:0 auto';
	//取高度最小的盒子，在其后面加下一张呢图片
	var arrh=new Array();//存放几列的高度
	for(var i=0;i<boxl.length;i++){
		if(i<clus){
			arrh.push(boxl[i].offsetHeight);
		}
		else{
			var minh=Math.min.apply(null,arrh);      //获取最小高度
			var index=getw(arrh,minh);               //得到最小高度位于的那列
			boxl[i].style.position='absolute';       //绝度定位，把对象卡在那里
			boxl[i].style.top=minh+'px';
			boxl[i].style.left=index*boxw+'px';
			arrh[index]+=boxl[i].offsetHeight;       //把新的高度传给arrh
		}
	}
}
//获取class
function getbcls(parent,clsnm){
	var boxarr=new Array();         //用来存放class数组
	var oele=parent.getElementsByTagName('*');
	 	for(var i=0;i<oele.length;i++){
	 		if(oele[i].className==clsnm){
	 			boxarr.push(oele[i]);
	 		}
	 	}
	 	return boxarr;
}
//找到高度最小的那列
function getw(arr,val){
	for(var i in arr){
		if(arr[i]==val){
           return i;
		}
	}
}
//是否具备加载数据块的条件
function sfons(){
	var oparent=document.getElementById('main');
	var boxa=getbcls(oparent,'box');
	var lasth=boxa[boxa.length-1].offsetTop+Math.floor(boxa[boxa.length-1].offsetHeight/2);//图片高度
	var scrl=document.body.scrollTop||document.documentElement.scrollTop;//滚动条滚动的距离
	var wh=document.body.clientHeight||document.documentElement.clientHeight;//屏幕的高度
	return (lasth<srcl+wh)?true:false;//判断是否具备加载的距离

}