基于分页基础上的瀑布流

1、页面（jsp）

<script type="text/javascript">
    var beginShow=1,//初始化显示的条数，以后作为当前第一页
    perNum = 10,//每次滚动时加载的数量
    pCount = 1;//定义一个总页数，在ajax返回的时候会修改它
    //设置是否继续滚动加载的标志位(0:可以加载 1：不再加载)
    var IS_OVER=0;
    //刚进页面第一次加载
    $(function(){
         list(beginShow,perNum);
     });
     //当滚动到屏幕底部时
     $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            //判断当前情况，如果滚动标志位为0时，表示可加载
            if(IS_OVER==0){
                //当前页码数+1
                beginShow++;
                //加载新的页码数
                list(beginShow,perNum);
            }
        }
    }); 
     
     //aJax获取分页数据
     function list(currentPage,showCount){
         var year='${pd.year}';
         var month='${pd.month}';
         var cityId='${pd.COURSE_CITY_ID}';
         var COURSE_CATEGORY_ID='${pd.COURSE_CATEGORY_ID}';
         $.ajax({
             type:'POST',
             url:'course/toCourseList',
             data:{currentPage:currentPage,showCount:showCount,SECTION_ID:'${pd.SECTION_ID}',
                  STATUS:'${pd.STATUS}',TYPE:'${pd.TYPE}',year:year,month:month,
                  COURSE_CITY_ID:cityId,COURSE_CATEGORY_ID:COURSE_CATEGORY_ID},
             dataType:'json',
             cache:false,
             success:function(data){
                 pCount=data.page.totalPage;
                 var Mylist=data.list;
                 //如果现在处在第一页，且获取到的课程数量为空时，给用户显示的内容
                 if(currentPage==1&&Mylist.length==0){
                     $(".mainbody").html('<div><div class="box">这里暂无课程</div></div>');
                     IS_OVER=1;
                     //隐藏等待图标
                     $("#waiting").hide();
                 }else{
                     //如果现在的页数大于等于最大页码数，不再翻页
                      if(currentPage>=pCount){
                          //定义加载标志位，让其不能再加载
                          IS_OVER=1;
                          $("#waiting").hide();
                      }
                     
                      var listHtml='';
                      for(var item in Mylist){
                          var vala=Mylist;
                          listHtml+='';
                          listHtml+='';
                          ......
                      }
                      $(".mainbody").append(listHtml);
                 }
             },
             error:function(e){
                 swal("网络出错了");
             }
         });
     }
     71 </script>

 2、controller

/**
     * AJax获取课程列表
     * @param page
     * @param currentPage
     * @param showCount
     * @return
     */
    @RequestMapping(value="toCourseList")
    @ResponseBody
    public Object toCourseList(Page page,
            @RequestParam(value="currentPage",required=false) int currentPage,
            @RequestParam(value="showCount",required=false) int showCount){
        logBefore(logger, "Ajax获取课程列表");
        PageData pd=new PageData();
        Map<String, Object> result=new HashMap<String,Object>();
        try {
            pd=this.getPageData();
            page.setPd(pd);
            page.setCurrentPage(currentPage);
            page.setShowCount(showCount);
            List<PageData> list = courseService.list(page);
            result.put("list", list);
            result.put("page", page);
            result.put("pd", pd);
        } catch (Exception e) {
            logger.error(e.toString(), e);
        }
        return result;
    }