首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-08-24 
两种常见瀑布流(定位的瀑布流与浮动的瀑布流)类似蘑菇街,美丽说网站的瀑布流1.定位的瀑布流:window.onload

两种常见瀑布流(定位的瀑布流与浮动的瀑布流)
类似蘑菇街,美丽说网站的瀑布流

1.定位的瀑布流:window.onload = function(){var aLi = document.getElementsByTagName('li');var aHeight = {L:[],C:[],R:[]};for(var i=0;i<aLi.length;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<step;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<step;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<step;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<aUl.length;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<json.list.length;i++){var list = json.list[i];for(var j=0;j<list.src.length;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']}]}

热点排行