浮动型瀑布流效果实现
首先，实现一个原始页面，三列UL，每个UL下面多个li，来放置图片以及图片信息。
重点：通过滚动条事件来动态的从服务端获得图片，并创建li标签添加到对应的UL下。
滚动条事件：1.当每一列最后一个li出现在可视区域时，2.动态从服务端获得图片地址并创建li标签添加到对应的UL下。
1.当每一列最后一个li出现在可视区域时：
if(posTop(lastLi) < veiwHeight + scrollY）
其中：var veiwHeight = document.documentElement.clientHeight;//可视区高度
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;//获取滚动距离；后一项视为了兼容Chrome
function posTop(obj){//最后一个li距离最上面的高度；
var top = 0;
while(obj){
top += obj.offsetTop;
obj = obj.offsetParent;
}
return top;
}
2.动态从服务端获得图片地址并创建li标签添加到对应的UL下：
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 src="'+ list.src[j] +'" /><p>'+ list.title[j] +'</p>';
aUl[i].appendChild(oLi);
}
其中data.js是
{ 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']} ] }
完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#div1{ width:785px; height:auto; margin:20px auto;}
ul{ width:225px; margin:5px; float:left;border:1px solid red;}
</style>
<script type="text/javascript" src="new_ajax.js"></script>
<script>
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;//后一项视为了兼容Chrome//获取滚动距离；
for(var i=0;i<aUl.length;i++){
var aLi = aUl[i].getElementsByTagName('li');
var lastLi = aLi[aLi.length-1];//只需判断最后一个li是否进入可视区；
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 src="'+ list.src[j] +'" /><p>'+ list.title[j] +'</p>';
aUl[i].appendChild(oLi);
}
}
});
}
}
};
function posTop(obj){
var top = 0;
while(obj){
top += obj.offsetTop;
obj = obj.offsetParent;
}
return top;
}
};
</script>
</head>
<body>
<div id="div1">
<ul>
<li>
<img src="img/1.jpg" />
<p>111111111</p>
</li>
<li>
<img src="img/2.jpg" />
<p>111111111</p>
</li>
<li>
<img src="img/3.jpg" />
<p>111111111</p>
</li>
</ul>
<ul>
<li>
<img src="img/4.jpg" />
<p>111111111</p>
</li>
<li>
<img src="img/5.jpg" />
<p>111111111</p>
</li>
<li>
<img src="img/6.jpg" />
<p>111111111</p>
</li>
<li>
<img src="img/9.jpg" />
<p>111111111</p>
</li>
</ul>
<ul>
<li>
<img src="img/7.jpg" />
<p>111111111</p>
</li>
<li>
<img src="img/8.jpg" />
<p>111111111</p>
</li>
<li>
<img src="img/9.jpg" />
<p>111111111</p>
</li>
</ul>
</div>
</body>
</html>
