window.onload = function(){

waterfall("main","box");

var dataInt={"data":[{"src":'1.jpg'},{"src":'2.jpg'},

{"src":'3.jpg'},{"src":'4.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=dataInt.data[i].src;

oPic.appendChild(oImg);

}

}

}

}

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 height = document.body.clientHeight ||

document.documentElement.clientHeight;

return (lastBoxH<scrollTop+height)?true:false;

}

function waterfall(parent,content){

var oParent = document.getElementById(parent);

var oBoxs = getByClass(oParent,content);

var oBoxw = oBoxs[0].offsetWidth;

var cols=Math.floor(

document.documentElement.clientWidth/oBoxw);

oParent.style.cssText="width:"+oBoxw*cols+"px;margin:0 auto";

var hArr = new Array;

for(i=0;i<oBoxs.length;i++){

if(i<cols){

hArr[i]=oBoxs[i].offsetHeight;

}else{

var minH=Math.min.apply(null,hArr);

var index=getMinHindex(hArr,minH);

oBoxs[i].style.position="absolute";

oBoxs[i].style.top=minH+"px";

oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";

hArr[index]+=oBoxs[i].offsetHeight;

}

}

}

function getMinHindex(arr,val){

for(var i in arr){

if (arr[i]==val) {

return i;

}

}

}

function getByClass(parent,clname){

var boxArr = new Array;

var oElements = parent.getElementsByTagName('*');

for(i=0;i<oElements.length;i++){

if (oElements[i].className==clname) {

boxArr.push(oElements[i]);

}

}

return boxArr;

}