之前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);
改进:考虑到有些用户并不喜欢自动加载的功能,可以在页面上添加“取消自动加载”的按钮,换以按钮控制。
另一个参考:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现当拉动滚动条到底部加载数据</title> <style type="text/css"> *{margin:0;padding:0;} body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;} a{color:#444;text-decoration: none;} a:hover{color:#065BC2;text-decoration: none;} .clear{clear:both;} img{border:none;vertical-align: middle;} ul{list-style: none;} </style> </head> <body> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript"> var totalheight = 0; function loadData() { totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if ($(document).height() <= totalheight) { //加载数据 $("#container").append($(document).scrollTop()+"<br/>"); } } $(window).scroll( function() { console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop()); console.log("页面的文档高度 :"+$(document).height()); console.log('浏览器的高度:'+$(window).height()); loadData(); }); </script> </head> <body> <div id="container"> dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/> </div> </body> </html>