window.onload=
function
(){
waterfall('main','box');
var
dataInt={
"data"
:[{
"src"
:
"0.jpg"
},{
"src"
:
"1.jpg"
},{
"src"
:
"2.jpg"
},{
"src"
:
"3.jpg"
},{
"src"
:
"4.jpg"
}]}
window.onscroll=
function
(){
if
(checkScrollSlide){
for
(
var
i=0;i<dataInt.data.length;i++){
var
oparent=document.getElementById(
"main"
);
var
box=document.createElement(
"p"
);
box.className=
"box"
;
oparent.appendChild(box);
var
pic=document.createElement(
"p"
);
pic.className=
"pic"
;
box.appendChild(pic);
var
img=document.createElement(
"img"
);
img.src=
"wallpoll/"
+dataInt.data[i].src;
pic.appendChild(img);
}
}
waterfall('main','box');
}
}
function
waterfall(parent,child){
var
oparent=document.getElementById(parent);
var
boxs=oparent.getElementsByClassName(child);
var
boxw=boxs[0].offsetWidth;
var
cols=Math.
floor
(document.documentElement.clientWidth/boxw);
oparent.style.cssText=
"width:"
+cols*boxw+
"px;margin:0 auto"
;
var
harr=
new
Array();
for
(
var
i=0;i<boxs.length;i++){
if
(i<cols){
harr.push(boxs[i].offsetHeight);
}
else
{
var
minH=Math.min.apply(null,harr);
var
index=getMinhIndex(harr,minH);
boxs[i].style.position=
"absolute"
;
boxs[i].style.top=minH+
"px"
;
boxs[i].style.left=boxs[index].offsetLeft+
"px"
;
harr[index]+=boxs[i].offsetHeight;
}
}
}
function
getMinhIndex(arr,val){
for
(
var
i in arr){
if
(arr[i]===val){
return
i;
}
}
}
function
checkScrollSlide(){
var
oparent=document.getElementById(
"main"
);
var
boxs=oparent.getElementsByClassName(
"box"
);
var
lastBox=boxs[boxs.length-1];
var
height=lastBox.offsetTop+Math.
floor
(lastBox.offsetHeight/2);
var
scrollHeigth=document.documentElement.scrollTop || document.body.scrollTop;
var
seeHeigth=document.documentElement.clientHeigth || document.body.clientHeigth;
return
seeHeigth+scrollHeigth>height?true:false;
}