c语言switch瀑布流,两种常见飞瀑流（定位的瀑布流与浮动的瀑布流）

两种常见瀑布流(定位的瀑布流与浮动的瀑布流)

类似蘑菇街，美丽说网站的瀑布流

1.定位的瀑布流：

window.onload = function(){

var aLi = document.getElementsByTagName('li');

var aHeight = {L:[],C:[],R:[]};

for(var i=0;i

var iNow = i%3;

switch(iNow){

case 0:

aLi[i].style.left = '5px';

aHeight.L.push(aLi[i].offsetHeight);

var step = Math.floor(i/3);

if(!step){

aLi[i].style.top = 0;

}

else{

var sum = 0;

for(var j=0;j

sum += aHeight.L[j] + 5;

}

aLi[i].style.top = sum + 'px';

}

break;

case 1:

aLi[i].style.left = '240px';

aHeight.C.push(aLi[i].offsetHeight);

var step = Math.floor(i/3);

if(!step){

aLi[i].style.top = 0;

}

else{

var sum = 0;

for(var j=0;j

sum += aHeight.C[j] + 5;

}

aLi[i].style.top = sum + 'px';

}

break;

case 2:

aLi[i].style.left = '475px';

aHeight.R.push(aLi[i].offsetHeight);

var step = Math.floor(i/3);

if(!step){

aLi[i].style.top = 0;

}

else{

var sum = 0;

for(var j=0;j

sum += aHeight.R[j] + 5;

}

aLi[i].style.top = sum + 'px';

}

break;

}

}

};

2.浮动的瀑布流：

window.onload = function(){

var aUl = document.getElementsByTagName('ul');

var bBtn = true;

window.onscroll = function(){

var veiwHeight = document.documentElement.clientHeight;

var scrollY = document.documentElement.scrollTop || document.body.scrollTop;

for(var i=0;i

var aLi = aUl[i].getElementsByTagName('li');

var lastLi = aLi[aLi.length-1];

if(posTop(lastLi) < veiwHeight + scrollY && bBtn){

bBtn = false;

ajax('data.js',function(str){

var json = eval('('+ str +')');

if(json.code){

bBtn = true;

}

for(var i=0;i

var list = json.list[i];

for(var j=0;j

var oLi = document.createElement('li');

oLi.innerHTML = '[img]'+ list.src[j] +'[/img]'+ list.title[j] +'

';

aUl[i].appendChild(oLi);

}

}

});

}

}

};

function posTop(obj){

var top = 0;

while(obj){

top += obj.offsetTop;

obj = obj.offsetParent;

}

return top;

}

};

所需测试的json数据：

{

code : 0,

list : [

{src:['img/1.jpg','img/2.jpg','img/3.jpg'],title:['222222222','222222222','222222222']},

{src:['img/4.jpg','img/5.jpg','img/6.jpg'],title:['222222222','222222222','222222222']},

{src:['img/7.jpg','img/8.jpg','img/9.jpg'],title:['222222222','222222222','222222222']}

]

}