/**
* Created by solexit11 on 2016/1/9.
*/
window.onload = function(){
   waterfall("main","box");
   var dataInt ={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]}
 // data 是一个对象  data 是该对象的属性
   window.onscroll = function(){
       if(checkScrollSlide){
           //将数据块渲染到页面的尾部
           var op = document.getElementById('main')
           for(var i=0;dataInt.data.length;i++){
               var oBox = document.createElement("div");
               oBox.className='box';
               op.appendChild(oBox);
               var oPic = document.createElement("div")
               oPic.className = 'pic';
               oBox.appendChild(oPic);
               var oImg = document.createElement('img');
               oImg.src ="img/"+dataInt.data[i].src;
               oPic.appendChild(oImg)
           }
           waterfall("main","box");
       }
   }
}
function waterfall(parent,box){
   var op = document.getElementById(parent);//获取父元素的ID
   var box =  getClassname(op,box);//在main父元素内查找类名为box的元素
   //console.log(box);

   //计算每个box的宽度
   var box_width = box[0].offsetWidth;//所有该类的元素宽度相等
   //console.log(box_width);
   //每行有的列数
   var cols = Math.floor(document.documentElement.clientWidth / box_width);
   console.log(cols)
   //设置main的宽度，以及居中
   op.style.cssText="width:"+box_width*cols+"px;"+"margin:auto;";

   //实现图片位置的改变
   var harr =[];//存放每一列高度的数组
   for(var i = 0;i<box.length;i++){
       if(i<cols){
           harr.push(box[i].offsetHeight);
       }else{
           var minH = Math.min.apply(null,harr)//min获取小的数，apply用来转换方法中this的指向
           var index= getMinIndex(harr,minH);//最小值在数组中的索引
           box[i].style.position="absolute";
           box[i].style.top = minH +"px";
           box[i].style.left= box[index].offsetLeft +"px";
           harr[index] =harr[index] + box[i].offsetHeight ;
       }
       console.log(harr);
   }
}

function getClassname(parent,classname){
   var boxarr =new Array();//存储所有名为box的元素
   var  oparr = parent.getElementsByTagName('*');//获取main父元素下的所有类名,并放进数组内
   for(var i = 0;i<oparr.length;i++){
       if(oparr[i].className == classname){
           boxarr.push(oparr[i]);
       }
   }
   return boxarr;
}
function getMinIndex(arr,val){
   for(var i in arr){
       if(arr[i] == val){
          return i;
       }
   }
}

//检测是否具备加载数据块的条件

function checkScrollSlide(){
   var op = document.getElementById("main");
   var oBox = getClassname(op,'box');
   var lastBoxH = oBox[oBox.length-1].offsetTop + Math.floor(oBox[oBox.length-1].offsetHeight/2);//最后一个元素的出现二分之一的高度

   var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//页面滚走的距离
   var Cheight = document.body.clientHeight || document.documentElement.clientHeight;//页面可视高度
   return (lastBoxH < scrollTop + Cheight)?true:false;
}