Jquery的 scroll事件，實現當滾動條到達最底部時，自動加載新項
主題：使用 Jquery的 scroll事件，實現當滾動條到達最底部時，自動加載新項
原理：滾動條事件中，判斷是否到達最底部，是的話調用添加方法，異步向尾部追加內容。
補充1：網上有找到一個此效果的網站：www.diandian.com
2：替代方案：QQ空間的好友動態中使用在最底部放置一個按鈕，之後異步加載數據！
前置條件：添加jquery.min.js
源碼：
（以下代碼，關於判斷是否爲最底部的方式，其精確性有待進一步研究）
----------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function insertcode() {
var $body = $("body");
$body.append('<div style=\" height:1000px; font-size:24px;\">新增項目</div>')
$("#page_tag_load").hide();
}
$(document).ready(function () {
$(window).scroll(function () {
var $body = $("body");
var $html = "";
$html += "<br/>" + ($(window).height() + $(window).scrollTop());
$html += "<br/>window.height: " + $(window).height();
$html += "<br/>body.height: " + $body.height();
$html += "<br/>window.scrollTop: " + $(window).scrollTop();
$("#page_tag_bottom").html($html);
/*判斷窗體高度與豎向滾動位移大小相加 是否 超過內容頁高度*/
if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
$("#page_tag_load").show();
//setTimeout(insertcode, 1000);/*IE 不支持*/
insertcode();
}
});
});
</script>
</head>
<body>
<div style=" height:1000px; font-size:24px;">新增項目</div>
<div id="page_tag_bottom" style=" width:100%; position:fixed; top:0px; background-color:#cccccc;height:100px;"></div>
<div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加載中...</div>
</body>
</html>
