日期:2014-05-17  浏览次数:20630 次

紧急求教啊!!!!一个页面JS的问题!!!!
我的需求是这样的就是从后台传到前台一个30条的List
开始的时候只显示10条 
但是当浏览器的滚动条浏览到这个存放List 的 DIV 的最后的时候再显示10条 然后再到最后的时候再多显示十条
我现在的想法是 先把后面20条隐藏 但是怎么判断浏览器的滚动条【是浏览器的滚动条不是DIV的滚动条此DIV无滚动条】
是否已经滚到这个DIV的最底下 【PS 不是整个页面的最底下】[类似于人人网的那个样子]

跪求高手帮助 JS JQuery 或者有更好的解决方法 处理此需求 [前台用的是freemarker]


------解决方案--------------------
<script type="text/javascript">
var iHeight = 0;
var iTop = 0;
var clientHeight = 0;
var iIntervalId = null;
var itemsSize = 0;
var pageNo = 1; // 当前页数,默认设为第 1 页
var pageSize = 4; // 每页显示的数量
  
getPageHeight();
  
// 添加定时检测事件,每2秒检测一次
iIntervalId = setInterval("_onScroll();", 2000);
  
// 取得当前页面显示所占用的高度
function getPageHeight() {
if(document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
  
iHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
  
// 调用ajax取服务端数据
function show() {
pageNo++;
  
$.ajax({
url: 'img.php?p='+pageNo+'&r='+Math.random(),
type: 'GET',
dataType: 'text',
timeout: 4000,
beforeSend: showLoadingImg,
error: showFailure,
success: showResponse
});
}
  
function showLoadingImg() {
$('#showmore').html('<a class="handle" href="javascript:show()"><img src="images_test/loading.gif" height="32px" />显示更多结果</a>');
}
  
function showFailure() {
$('#showmore').html('<font color=red> 获取查询数据出错 </font>');
}
  
// 根据ajax取出来的json数据转换成html
function showResponse(responseData) {
var returnjson = eval("("+responseData+")");
itemsSize = returnjson.items.length;
  
var nextpagehtml = '';
var pageOffset = (pageNo-1)*pageSize + 1;
for(i=0; i<itemsSize; i++) {
nextpagehtml += '<ul class="item">';
nextpagehtml += '<li class="i_thumb"><a href="http://www.xuekaifa.com" target="_blank" title="'+ returnjson.items[i].name +'"><img src="'+ returnjson.items[i].pic +'" alt="'+ returnjson.items[i].name +'" /></a></li>';
nextpagehtml += '<li class="i_title"><span class="order">'+ (pageOffset + i) +'</span><a href="http://www.xuekaifa.com" target="_blank" title="'+ returnjson.items[i].name +'">'+ returnjson.items[i].name +'</a></li>';

nextpagehtml += '</ul>';
}
nextpagehtml += '<div class="clear"></div>';
$('#items').html($('#items').html() + nextpagehtml);
  
// 当前页码数小于3页时继续显示更多提示框
if(pageNo < 3) {
$('#showmore').html('<a class="handle" href="javascript:show()">显示更多结果</a>');
} else {
clearInterval(iIntervalId);
$('#showmore').hide();
}
}
  
// 判断滚动条是否到达底部
function reachBottom() {
var scrollTop = 0;
if(document.documentElement &am