<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动的瀑布流（案例：蘑菇街）.html</title>
<style>
*{margin:0;padding:0;}
ul,li{list-style: none}
#div1{width:695px;margin:20px auto;border:1px solid #ccc;overflow:auto;}
ul{width:225px;height:auto;float:left;margin-left:5px;}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
var data={//模拟ajax返回的数据
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']}
]
};
$(window).scroll(function(){ //当触发scroll时间的时候，每个ul的最后一个li，当它进入可视区内时，就发送ajax事件，获取下面的数据。
var bBtn=true; //建一个开关
for(var i=0;i<$("ul".length);i++){ //循环每一个ul
var lastLi=$("ul")[i].find("li").last(); //找到每个ul里面最后一个li
var liTop=lastLi.offset().top; //获取每一个li到文档顶部的距离
var aa=$(window).height()+$(window).scrollTop(); //获取可视区窗口高度+滚动条滚动的距离
if(liTop<aa&&bBtn) { //如果那个li到文档顶部距离小于aa，即这个li进入了可视窗口，就发送ajax事件
bBtn=false;//刚进来的时候为false
/*var jqXHR=$.ajax({ //模拟ajax请求数据
type:"get",
url:"",
data:{},
dataType:"json",
}
jqXHR.done(function(data){
});*/
if(data.code){//如果还有内容就发送第二次请求
bBtn=true;
}
for(var i in data){ //其实这应该写到done函数里的
var list=data.list[i];
var htm="";
for(var j in list){
var src=list.src[j];
var title=list.title[j];
htl+="<li><img src='"+src+"'><p>"+title+"</p></li>";
}
$("ul[i]").append(htm);
}
}
}
});
</script>
</head>
<body>
<div id="div1">
<ul>
<li>
<img src="img/1.jpg">
<p>1111111</p>
</li>
<li>
<img src="img/2.jpg">
<p>2222222</p>
</li>
<li>
<img src="img/3.jpg">
<p>3333333</p>
</li>
</ul>
<ul>
<li>
<img src="img/4.jpg">
<p>1111111</p>
</li>
<li>
<img src="img/5.jpg">
<p>2222222</p>
</li>
<li>
<img src="img/6.jpg">
<p>3333333</p>
</li>
<li>
<img src="img/9.jpg">
<p>3333333</p>
</li>
</ul>
<ul>
<li>
<img src="img/7.jpg">
<p>1111111</p>
</li>
<li>
<img src="img/8.jpg">
<p>2222222</p>
</li>
<li>
<img src="img/9.jpg">
<p>3333333</p>
</li>
</ul>
</div>
</body>
</html>