一、之前Google的图片搜索结果界面提供了一个功能，即滚动条滚动到接近底部的位置自动加载剩余图片。个人觉得这个功能还蛮人性化的，避免来回翻页的繁琐，让搜索结果以增量形式展现。所以也自己仿造了一个。功能是基于JQuery的。下面是代码。
$(window).scroll(function() {
var o = $('#pincontainer');
// 并不是所有页面都要执行加载操作。
// 你也可以选择别的识别条件。
if(o!=null && o.length !=0){
//获取网页的完整高度(fix)
var hght= window.scrollHeight;
//获取浏览器高度(fix)
var clientHeight =window.clientHeight;
//获取网页滚过的高度(dynamic)
var top= window.pageYOffset ||
(document.compatMode == 'CSS1Compat' ?
document.documentElement.scrollTop :
document.body.scrollTop);
//当 top+clientHeight = scrollHeight的时候就说明到底儿了
if(top>=(parseInt(hght)-clientHeight)){
show();
}
}
});
//我所要执行的操作是把ajax取得的数据塞到目标div中
function show(){
var target = $('#pincontainer');
if(!target){return false;}
//一般你都要记录一下你的数据的录入状态，比如到当前显示页码
var current_page = parseInt(target.attr('index'));
//还要记录一个最大显示页码，以阻止请求溢出
var max_page = parseInt(target.attr('maxPages'));
if(current_page >= max_page){
return false;
}
var data={};
data.nextPage = parseInt(current_page)+1;
var currentHref = window.location;
// 有的时候可能还要从url中读取参数，我使用正则式
var tcaStr = new RegExp("(^|)tca=([^\&]*)(\&|$)","gi").exec(currentHref);
if(tcaStr) data.tca = tcaStr[2];
var scaStr = new RegExp("(^|)sca=([^\&]*)(\&|$)","gi").exec(currentHref);
if(scaStr) data.sca = scaStr[2];
var tagStr = new RegExp("(^|)tag=([^\&]*)(\&|$)","gi").exec(currentHref);
if(tagStr) data.tag = tagStr[2];
// ajax请求数据
jQuery.ajax({
type:"POST",
url: "/show/getPins/",
data:data,
dataType: "json",
beforeSend: function(XMLHttpRequest){
$("#loading").css('display','');
},
success:function(response) {
if(response.data){
for(var i=0, length = response.data.length; i<length; i++){
var html = response.data[i];
var test = $(html);
target.append(test);
var img = test.find('img');
X.util.flowPin(img[0],188);
}
target.attr('index',parseInt(current_page)+1);
$("#loading").css('display','none');
}
},
error:function(){
alert("加载失败");
}
});
return false;
}
这个功能的一个关键成败点是scrollTop的计算。刚开始我只使用了document.body.scrollTop，但是这个数值在chrome中一直显示0，于是有了上面的多浏览器兼容计算方法。
//获取网页滚过的高度(dynamic)
var top= window.pageYOffset ||
(document.compatMode == 'CSS1Compat' ?
document.documentElement.scrollTop :
document.body.scrollTop);
改进：考虑到有些用户并不喜欢自动加载的功能，可以在页面上添加“取消自动加载”的按钮，换以按钮控制。
二、js_滚动条下拉 自动加载内容_仿qq空间的个人中心
<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">
$(document).ready(function(){
var range = 50; //距下边界长度/单位px
var elemt = 500; //插入元素高度/单位px
var maxnum = 3; //设置加载最多次数
var num = 0;
$(window).scroll(function(){
var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
var dbHiht = $("body").height(); //页面(约等于窗体)高度/单位px
var main = $("#try"); //主体元素
var mainHiht = main.height(); //主体元素高度/单位px
if((srollPos + dbHiht) >= (mainHiht-range) && num != maxnum){
main.append("<div style='height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");
num++;
}
});
});
</script>
</head>
<body>
<div id="try" style="height:960px">
<div id="follow">this is a scroll test;<br/> 页面下拉自动加载内容</div>
</div>
</body>
</html>
三、
2.//Author:数据库之家
3.//URL:http://www.uol123.com
4.
5.var page=0;
6.$(window).scroll(function() {
7. var o = $(‘#jokelist’);
8. if(o!=null ){
9. //var hght= document.body.scrollHeight;
10. //var clt =document.documentElement.clientHeight;
11. //var top= document.documentElement.scrollTop ;
12. var hght= $(document).height();// 整个页面的高度
13. var clt =$(window).height(); // 当前可见页面高度
14. var top= $(document).scrollTop();// 滚动条距顶部高度
15. if(top>=(parseInt(hght)-clt)>>page<5){//加载前5页的
16. page=parseInt(page)+1;
17. ReadMore(page);
18. }
19. }
20.});
21.
22.
23.
24.function ReadMore(page){
25. $(“#news-bottom-list”).html(‘正在获取信息…’);
26. $(“#news-bottom-list”).append(‘<img src=”img/dailyfun/loading2.gif”>’);
27. next=parseInt(page)+1;
28. setTimeout(function(){
29. html=$.get(‘readmore.php’,‘p=’+page+‘>s=10′,function (data){
30. $(“#jokelist”).append(data);
31. if(next<=5){
32. $(“#news-bottom-list”).html(“<a href=’javascript:void(0);’ οnclick=’ReadMore(“+next+“);’>查看更多资讯↓</a>”);
33. }else{
34. $(“#news-bottom-list”).html(“”);
35. }
36. });
37. },500);//等待0.5S后开始加载，你也可以去掉这个时间
38.
39.}
