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