演示地址：http://www.miiceic.org.cn/eg/pubuliu/
html源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>还有待改善的瀑布流，欢迎补充</title>
<script language="javascript" src="http://www.miiceic.org.cn/templets/js/jquery.js"></script>
</head>
<style>
#page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px; padding: 10px; left: 330px; }
</style>
<body>
<div id="float">
安博中程企业培训<br />企业内训<br />iOS开发培训<br />Android开发培训<br />安博中程企业培训<br />企业内训<br />iOS开发培训<br />Android开发培训<br />安博中程企业培训<br />企业内训<br />iOS开发培训<br />Android开发培训<br />安博中程企业培训<br />企业内训<br />iOS开发培训<br />Android开发培训<br />安博中程企业培训<br />企业内训<br />iOS开发培训<br />Android开发培训<br />安博中程企业培训<br />企业内训<br />iOS开发培训<br />Android开发培训<br />安博中程企业培训<br />企业内训<br />iOS开发培训<br />Android开发培训<br />安博中程企业培训<br />企业内训<br />iOS开发培训<br />Android开发培训<br />安博中程企业培训<br />企业内训<br />iOS开发培训<br />Android开发培训<br />安博中程企业培训<br />企业内训<br />iOS开发培训<br />Android开发培训<br />安博中程企业培训<br />企业内训<br />iOS开发培训<br />Android开发培训<br />安博中程企业培训<br />企业内训<br /><a href="http://www.miiceic.org.cn/ios/">iOS开发培训</a><br />Android开发培训<br />
</div>
<div id="page_loading">
<span>给力加载中……</span>
</div>
</body>
</html>
<script type="text/javascript">
// 给浏览器窗口绑定 scroll 事件
var s = 0;
var topHeight=$(document).scrollTop();
var winHeight = $(window).height();
var docHeight = $(document).height();
$(window).bind("scroll",function(){
// 判断窗口的滚动条是否接近页面底部
if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
// 判断下一页链接是否为空
$("#page_loading").show("slow");
$.ajax({
type: "POST",
url: "/course/pubuliu.php",
data: "s=" + s,
success: function (msg) {
$("#float").append(msg);
},
});
$("#page_loading").hide("fast");
s = s+1;
}
else{
setTimeout("$('#page_loading').hide()",1000);
setTimeout("$('#page_loading').remove()",1100);
}
});
</script>
php代码：
简单的数据库操作代码，此处略。
演示地址：http://www.miiceic.org.cn/eg/pubuliu/
分享到：
评论