window.onload=function(){
	waterfall('main','box');
	//假設(shè)后臺(tái)需要加載的圖片
	var?dataInt={"data":[{'src':'16.jpg'},{'src':'17.jpg'},{'src':'18.jpg'},{'src':'19.jpg'},{'src':'20.jpg'},{'src':'21.jpg'},{'src':'22.jpg'},{'src':'23.jpg'},{'src':'24.jpg'},{'src':'25.jpg'},{'src':'26.jpg'},{'src':'27.jpg'},{'src':'28.jpg'},{'src':'29.jpg'},{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},]}
	//滾動(dòng)條滑動(dòng)時(shí)間
	window.onscroll=function(){
		if(checkScrollSlide()){
			for(var?i=0;i<dataInt.data.length;i++){
				var?oParent=document.getElementById('main');
				var?oDiv=document.createElement('div');
				oDiv.className='box';
				oParent.appendChild(oDiv);
				
				var?oPic=document.createElement('div');
				oPic.className='pic';
				oDiv.appendChild(oPic);
				
				var?oImg=document.createElement('img');
				oImg.src='img/water-fall/'+dataInt.data[i].src;
				oPic.appendChild(oImg);
				}
				waterfall('main','box');
			}
		}
	}
//將Main下的class='box'取出來	
function?waterfall(parent,box){
	oParent=document.getElementById('main');
	oBox=getByClass(oParent,'box');
	//alert(oBox.length);//40
	
	//1、獲取每列的寬
	oBoxW=oBox[0].offsetWidth;
	//2、獲取列數(shù)
	cols=Math.floor(document.documentElement.clientWidth/oBoxW);?
	//3、列*寬=整個(gè)瀏覽器頁面的寬度
	oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0?auto;"
	//實(shí)現(xiàn)瀑布流布局
	var?hArr=[];
	for(var?i=0;i<oBox.length;i++){
		//獲取第一行所有圖片的高度
		if(i<cols){
			hArr.push(oBox[i].offsetHeight);
			}
		else{
			//獲取第一行中高度最少的圖片并在它之后開始排列
			var?minH=Math.min.apply(null,hArr);
			//獲取高度最少圖片索引
			var?index=getIndex(hArr,minH);
			//定位接下來的圖片
			oBox[i].style.position='absolute';
			oBox[i].style.top=minH+'px';
			oBox[i].style.left=oBox[index].offsetLeft+'px';
			//***關(guān)鍵一步
			hArr[index]+=oBox[i].offsetHeight;
			}	
			
		}
	}	
function?getByClass(obj,cls){	
	var?element=obj.getElementsByTagName('*');
	var?result=[];
	for(var?i=0;i<element.length;i++){
		if(element[i].className==cls){
			result.push(element[i])
			}
		}
	return?result;	//不能漏了這一步?。?！	
}	

function?getIndex(arr,val){
	for(i?in?arr){
		if?(arr[i]==val){
			return?i;
			}
		}
	}	
	
function?checkScrollSlide(){
	var?oParent=document.getElementById('main');
	var?oBox=getByClass(oParent,'box');
	//當(dāng)最后一張圖片出現(xiàn)一半時(shí)距離他整個(gè)頁面頂部距離
	var?lastBoxH=oBox[oBox.length-1].offsetTop+Math.floor(oBox[oBox.length-1].offsetHeight/2);
	//滾動(dòng)條移動(dòng)距離和瀏覽器本身高度?*****圖片解釋在img文件夾里??！
	var?scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var?clientH=document.documentElement.clientHeight||document.body.clientHeight;
	return?(lastBoxH<scrollTop+clientH)?true:false;
	}