// JavaScript Document
window.onload=function(){
?? ?waterfall('main','box');
?? ?//假設這是后臺給的數據塊
?? ?var dataint={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'}]}
?? ?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');
?? ??? ??? ??? ? opic.className='pic';
?? ??? ??? ??? ? obox.appendChild(opic);
?? ??? ??? ??? ? var oimg=document.createElement('img');
?? ??? ??? ??? ? oimg.src='images/'+dataint.data[i].src;
?? ??? ??? ??? ? opic.appendChild(oimg);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?waterfall('main','box');
?? ??? ??? ?}
?? ??? ?}
?? ?}
?? ??? ??? ?
function waterfall(partent,box){
?? ?//將main下面所有class為box的元素取出來
?? ?var oparent=document.getElementById(parent);
?? ?var boxs=getByClass(oparent,box);
?? ?//計算整個頁面顯示的列數（頁面寬度/box的寬度）
?? ?var boxwidth=boxs[0].offsetWidth;
?? ?var cols=Math.floor(document.documentElement.clientWidth/boxwidth);
?? ?//設置main的寬度
?? ?oparent.style.cssText='width:'+boxwidth*cols+'px;margin:0 auto;';
?? ?var heightarr=[];
?? ?for(var i=0; i<boxs.length; i++){
?? ??? ?if(i<cols){
?? ??? ??? ?heightarr.push(boxs[i].offsetHeight);
?? ??? ??? ?}else{
?? ??? ??? ??? ?var minh=Math.min.apply(null,heightarr);
?? ??? ??? ??? ?var index=getminhindex(heightarr,minh);
?? ??? ??? ??? ?boxs[i].style.position='absolute';
?? ??? ??? ??? ?boxs[i].style.top=minh+'px';
?? ??? ??? ??? ?boxs[i].style.left=boxwidth*index+'px';
?? ??? ??? ??? ?heightarr[index]=minh+boxs[i].offsetHeight;
?? ??? ??? ?}
?? ??? ?}
?? ?}
?? ?function getByClass(parent,clsname){
?? ??? ?var boxarr=new Array(),//用來存儲將來所有class為box的元素
?? ??? ???? oelements=parent.getElementsByTagName('*');
?? ??? ?for(var i=0; i< oelements.length; i++){
?? ??? ??? ? if(oelements[i].className==clsname){
?? ??? ??? ?? boxarr.push(oelements[i]);
?? ??? ??? ?}?? ?
?? ??? ?}
?? ?? return boxarr;?? ?
?? ?}
?? ?function getminhindex(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);
?? ??? ?//獲取滾動條滾動高度，在混雜模式下用body，在標準模式下documentElement
?? ??? ?var scrolltoph=document.body.scrollTop || document.documentElement.scrollTop;
?? ??? ?//接下來獲取瀏覽器窗口高度
?? ??? ?var height=document.body.clientHeight || document.documentElement.clientHeight;
?? ??? ?return (lastboxh<height+scrolltoph)?true:false;
?? ??? ?}???