//?JavaScript?Document
//瀑布流的實現主要是對頁面中的盒子做絕對定位的，第一行的排列不變，從第二行開始，下一行的第一個圖片必須出現在上一行最短的圖片下面，所以就要知道哪一列的圖片最短，所以就要知道列數和每一個盒子的寬和高，在做絕對定位時才能知道top和left
window.onload=function(){//當頁面加載完成時候觸發事件
	waterfall('main','box');//封裝一個函數將main里面所有的box取出來
	var?dataInt={"data":[{"src":'coin/9.png'},{"src":'coin/10.png'},{"src":'coin/11.png'},{"src":'coin/12.png'},{"src":'coin/13.png'}]}//后臺數據庫，后臺會給我們一個數據庫，這不屬于前端的范疇
	window.onscroll=function(){//當頁面滾動時候觸發事件
	???if(checkScrollSlide){//返回一個布爾值
	???var?oparent=document.getElementById('main');?
	??????//通過遍歷數據庫將數據塊渲染到頁面的尾部
		??for(var?i=0;i<dataInt.data.length;i++){
			??var?oBox=document.createElement('div');
			??oBox.className="box";//創建一個元素
			??oparent.appendChild(oBox);//把一個子元素添加到父元素的后面
			??var?oPic=document.createElement('div');
			??oBox.className="pic";
			??oBox.appendChild(oPic);
			??var?oImg=document.createElement('img');
			??oImg.src="coin/"+dataInt.data[i].src;
			??oPic.appendChild(oImg);
			??}
			waterfall('main','box');
		???}?
		}
	}
?function?waterfall(parent,box){
	?//將main下所有class為box的元素取出來
	?var?oparent=document.getElementById(parent);
	?var?oBoxs=getByclass(oparent,box);//封裝一個函數根據class來獲取元素父元素下所有className為box的元素
	?//計算整個頁面的列數（頁面的寬/一個box的寬）
	?var?oBoxW=oBoxs[0].offsetWidth;//獲取一個盒子的寬度
	?var?ClientW=document.documentElement.clientWidth;//整個頁面的寬度
	?//整個頁面的列數cols
	?var?cols=Math.floor(ClientW/oBoxW);
	?//設置main的寬度，并使main居中
	??oparent.style.cssText='width:'+oBoxW*cols+'px;margin:0?auto';?
	??var?hArr=[];//存放每一列高度的數組?
	???for(var?i=0;i<oBoxs.length;i++){//for()是用來遍歷元素的
	????if(i<cols){
			hArr.push(oBoxs[i].offsetHeight);
			}else{//當i>cols時，表示已經到了下一行
			???var?minH=Math.min.apply(null,hArr);//Math.min(x,y)是用來求一組數據中最小的值，但不能求數組，所以用apply方法，這個方法是用來改變函數或者方法中this的指向
			????var?Index=getMinIndex(hArr,minH);//封裝一個函數來找到最短的盒子在這個數組中的索引
				oBoxs[i].style.position='absolute';
				oBoxs[i].style.left=oBoxW*Index+'px';
				//left的第二種求法?oBoxs[i].style.left=oBoxs[Index].offsetLeft+'px';?
				oBoxs[i].style.top=minH+'px';
				hArr[Index]+=oBoxs[i].offsetHeight;//需要修改數組，因為hArr存放的不只是第一行數組的高，當第二行第一個圖片放到第一行最短的那個圖片的下面后，下一列放在底下的圖片的top值就是兩張圖片的高度和了，否則不管循環多少次top值都是第一行最短的圖片的高，這樣剩下的圖片都會重疊到這個位置
				}
		??}
		??
	?}
?function?getByclass(oparent,clsName){
	??var?boxArr=new?Array();//聲明一個數組用來存儲所有的box
	??//先把main下所有的class都取出來，再遍歷每一個class
	??oElements=oparent.getElementsByTagName('*');//根據標簽去獲取元素，*可以獲取到這個父元素下所有的子元素，不管它是什么標簽
	??for(var?i=0;i<oElements.length;i++){//for()是用來遍歷元素的
	????if(oElements[i].className==clsName){
			boxArr.push(oElements[i]);//push(value)是用來把元素放到一個數組的后面
			}
		??}
	???return?boxArr;
	?}
?function?getMinIndex(arr,val){
	?for(var?i?in?arr){
		?if(arr[i]==val){
			?return?i;
			?}
		?}
	?}?
//檢測是否具備了滾動條加載的條件
?function?checkScrollSlide(){
	var?oparent=document.getElementById('main');?
	var?oBoxs=getByclass(oparent,'box');
	//獲取最后一張圖片在瀏覽器中的高度
	var?LastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor((oBoxs[oBoxs.length-1].offsetHeight)/2);
	//獲取自身高度和瀏覽器滾出的高度的和（因為存在瀏覽器的混雜模式和標準模式，考慮瀏覽器的兼容性）
	var?scrollTop=document.body.scrollTop||document.documentElement.scrollTop;//瀏覽器滾出的高度
	var?clientH=document.body.clientHeight||document.documentElement.clientHeight;//自身高度
	return?(LastBoxH<scrollTop+clientH)?true:false;//true表示可以加載，false則表示不能加載
	}