使用jquery实现页面滚动到底部自动加载新的信息

//定义加载一次的信息对象数量

public class Constant {

public final static int DEFAULT_FIRST_COUNT = 8;//第一次列表显示的个数

public final static int PER_PAGE_COUNT = 4;//没触底一次，追加4个信息对象

}

//java的Controller类

@Controller

@RequestMapping("/")

public class HomeController extends BaseController{

@Autowired

private QueryService queryService;//

/**

* 获取信息对象列表界面

*/

@RequestMapping(method = GET)

public String home(Model model){

List<***> list = queryService.findAll();

int toIndex = Constant.DEFAULT_FIRST_COUNT;

if（list.size()<Constant.DEFAULT_FIRST_COUNT）

toIndex = list.size();

model.addAttribut("list",list.subList(0,toIndex));//打开页面默认呈现的对象

model.addAttribut("current",toIndex);//已推送出去的对象个数

return "index";

}

/**

* 追加信息对象

*/

@RequestMapping(value="/superadd",produces="plain/text; charset=UTF-8")

@ResponseBody

public String superaddHit(int current){
List<*****> list= queryService.findAll();
int len = list.size();
int last = len-current;
if(last<=0)
last = 0;
int toIndex = current+Constant.HIT_PER_PAGE_COUNT;
if(last<Constant.HIT_PER_PAGE_COUNT)
toIndex = current+last;
return new Gson().toJson(bighitmap.subList(current, toIndex));//调用google的json插件，将信息对象转成json格式

}

}

jsp界面关键代码：

<input type="hidden" id="current" value="${current}"/><!--  -->

<div id="goodlistdiv" class="yly_tjian">

<c:forEach items="${list}" var="item" varStatus="vs">
<div class="yl_bc86" onclick="OpenProduct('${item.gId}');">
<div class="tjian_pro_bighit">
<div class="pro_img"><img src="http://dtjungle.blog.163.com/blog/${item.iconUrl}" width="100%" height="100%" /></div>
<div class="pro_name_bighit yly_color8 yly_font_size3">${item.gName}</div>
<div class="pro_pric">
<div class="price">
<span class="yl_bc30 yly_color12 yly_font_size8">￥${item.price}</span>
</div>
<div class="prics yl_bc29">
<span class="yl_bc31 yly_color3 yly_font_size3">${item.sold}人付款</span>
</div>
</div>
</div>
</div>
</c:forEach>

</div>

js代码

<script>
var stop=true;
$(window).scroll(function(){
//$(window).height()浏览器可视界面高度
//$(window).scrollTop()浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）
//$(document).height()整个网页的文档高度
totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
if($(document).height() <= totalheight){
if(stop==true){
stop=false;
$.post(ctx + '/superadd', {    //ctx项目访问路径前缀
"current" : $('#current').val(),
}, function(result) {
var json = JSON.parse(result);
if(json.length==0){
$('#superaddload').val('没有更多内容了！');
return;
}
var temp = parseInt($('#current').val())+json.length;
$('#current').val(temp);
for(var i=0;i<json.length;i++){
var hitdiv = "<div class=\"yl_bc86\" onclick=\"OpenProduct('"+json[i]['gId']+"');\">"
+"<div class=\"tjian_pro_bighit\"><div class=\"pro_img\">"
+"<img src=\""+json[i]['iconUrl']+"\" width=\"100%\" height=\"100%\" /></div>"
+"<div class=\"pro_name_bighit yly_color8 yly_font_size3\">"+json[i]['gName']+"</div>"
+"<div class=\"pro_pric\"><div class=\"prics\">"
+"<span class=\"yl_bc30 yly_color12 yly_font_size8\">￥"+json[i]['price']+"</span>"
+"</div><div class=\"prics yl_bc29\">"
+"<span class=\"yl_bc31 yly_color3 yly_font_size3\">"+json[i]['sold']+"人付款</span>"
+"</div></div></div></div>";
$('#goodlistdiv').append(hitdiv);
}
stop=true;
});
}
}
});
</script>