/**
* 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 是一個(gè)對(duì)象 ?data 是該對(duì)象的屬性
? ?window.onscroll = function(){
? ? ? ?if(checkScrollSlide){
? ? ? ? ? ?//將數(shù)據(jù)塊渲染到頁(yè)面的尾部
? ? ? ? ? ?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父元素內(nèi)查找類名為box的元素
? ?//console.log(box);

? ?//計(jì)算每個(gè)box的寬度
? ?var box_width = box[0].offsetWidth;//所有該類的元素寬度相等
? ?//console.log(box_width);
? ?//每行有的列數(shù)
? ?var cols = Math.floor(document.documentElement.clientWidth / box_width);
? ?console.log(cols)
? ?//設(shè)置main的寬度，以及居中
? ?op.style.cssText="width:"+box_width*cols+"px;"+"margin:auto;";

? ?//實(shí)現(xiàn)圖片位置的改變
? ?var harr =[];//存放每一列高度的數(shù)組
? ?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獲取小的數(shù)，apply用來(lái)轉(zhuǎn)換方法中this的指向
? ? ? ? ? ?var index= getMinIndex(harr,minH);//最小值在數(shù)組中的索引
? ? ? ? ? ?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();//存儲(chǔ)所有名為box的元素
? ?var ?oparr = parent.getElementsByTagName('*');//獲取main父元素下的所有類名,并放進(jìn)數(shù)組內(nèi)
? ?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;
? ? ? ?}
? ?}
}

//檢測(cè)是否具備加載數(shù)據(jù)塊的條件

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);//最后一個(gè)元素的出現(xiàn)二分之一的高度

? ?var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//頁(yè)面滾走的距離
? ?var Cheight = document.body.clientHeight || document.documentElement.clientHeight;//頁(yè)面可視高度
? ?return (lastBoxH < scrollTop + Cheight)?true:false;
}