//定義載入一次的資訊物件數量

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>