js瀑布流布局
html+js:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style-type:none}
#div{width:925px; height:auto;margin:20px auto;}
ul{width:220px;float:left;margin:5px;}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload=function()
{
var oDiv =document.getElementById("div");
var oUl=document.getElementsByTagName("ul");
window.onscroll=function()
{
var clientH=document.documentElement.clientHeight;
var scrollH=document.documentElement.scrollTop||document.body.scrollTop;
for(var i=0;i<oUl.length;i++)
{
var aLi=oUl[i].getElementsByTagName("li")
var lastL=aLi[aLi.length-1];
if(toTop(lastL)<clientH+scrollH)
{
ajax("a.js",function(str)
{
var json = eval('('+str+')')
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 src="'+list.src[j]+'"><p>'+list.title[j]+'</p>'
oUl[i].appendChild(oLi);
}
}
})
}
}
}
function toTop(obj)
{
var top=0;
while(obj)
{
top +=obj.offsetTop;
obj=obj.offsetParent
}
return top;
}
}
</script>
</head>
<body>
<div id='div'>
<ul>
<li>
<img src="images/1.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/2.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/3.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/4.jpg">
<p>11111111</p>
</li>
</ul>
<ul>
<li>
<img src="images/5.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/6.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/7.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/8.jpg">
<p>11111111</p>
</li>
</ul>
<ul>
<li>
<img src="images/9.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/10.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/11.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/12.jpg">
<p>11111111</p>
</li>
</ul>
<ul>
<li>
<img src="images/13.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/14.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/15.jpg">
<p>11111111</p>
</li>
<li>
<img src="images/16.jpg">
<p>11111111</p>
</li>
</ul>
</div>
</body>
</html>
json获取文件格式：
{
code : 0,
list:[
{src:["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"],title:['1111111','1111111','1111111','1111111']},
{src:["images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg"],title:['1111111','1111111','1111111','1111111']},
{src:["images/9.jpg","images/10.jpg","images/11.jpg","images/12.jpg"],title:['1111111','1111111','1111111','1111111']},
{src:["images/13.jpg","images/14.jpg","images/15.jpg","images/16.jpg"],title:['1111111','1111111','1111111','1111111']}
]
}
AJax封装文件：
function ajax(url,sFn,nFn)
{
var oAjax=null;
if(window.ActiveXObject)
{
oAjax=new ActiveXObject("Microsoft.XMLHTTP")
}
else
{
oAjax=new XMLHttpRequest();
}
oAjax.open("GET",url,true)
oAjax.send();
oAjax.onreadystatechange=function()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
if(sFn)
{
sFn(oAjax.responseText)
}
}
else
{
if(nFn)
{
nFn(oAjax.status)
}
}
}
}
}
温馨提示：这个要服务器的地址下才能访问;;
摘自 脉凌网络
