// 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则表示不能加载
	}