初级瀑布流，欢迎改善
演示地址：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/
?
1 楼 jjklmm 2012-05-15 初级完善后的瀑布流：http://jjklmm.iteye.com/blog/1529801