基于分页基础上的瀑布流

1、页面（jsp）

 1 <script type="text/javascript">
 2     var beginShow=1,//初始化显示的条数，以后作为当前第一页
 3     perNum = 10,//每次滚动时加载的数量
 4     pCount = 1;//定义一个总页数，在ajax返回的时候会修改它
 5     //设置是否继续滚动加载的标志位(0:可以加载 1：不再加载)
 6     var IS_OVER=0;
 7     //刚进页面第一次加载
 8     $(function(){
 9          list(beginShow,perNum);
10      });
11      //当滚动到屏幕底部时
12      $(window).scroll(function () {
13         if ($(window).scrollTop() == $(document).height() - $(window).height()) {
14             //判断当前情况，如果滚动标志位为0时，表示可加载
15             if(IS_OVER==0){
16                 //当前页码数+1
17                 beginShow++;
18                 //加载新的页码数
19                 list(beginShow,perNum);
20             }
21         }
22     }); 
23      
24      //aJax获取分页数据
25      function list(currentPage,showCount){
26          var year='${pd.year}';
27          var month='${pd.month}';
28          var cityId='${pd.COURSE_CITY_ID}';
29          var COURSE_CATEGORY_ID='${pd.COURSE_CATEGORY_ID}';
30          $.ajax({
31              type:'POST',
32              url:'course/toCourseList',
33              data:{currentPage:currentPage,showCount:showCount,SECTION_ID:'${pd.SECTION_ID}',
34                   STATUS:'${pd.STATUS}',TYPE:'${pd.TYPE}',year:year,month:month,
35                   COURSE_CITY_ID:cityId,COURSE_CATEGORY_ID:COURSE_CATEGORY_ID},
36              dataType:'json',
37              cache:false,
38              success:function(data){
39                  pCount=data.page.totalPage;
40                  var Mylist=data.list;
41                  //如果现在处在第一页，且获取到的课程数量为空时，给用户显示的内容
42                  if(currentPage==1&&Mylist.length==0){
43                      $(".mainbody").html('<div><div class="box">这里暂无课程</div></div>');
44                      IS_OVER=1;
45                      //隐藏等待图标
46                      $("#waiting").hide();
47                  }else{
48                      //如果现在的页数大于等于最大页码数，不再翻页
49                       if(currentPage>=pCount){
50                           //定义加载标志位，让其不能再加载
51                           IS_OVER=1;
52                           $("#waiting").hide();
53                       }
54                      
55                       var listHtml='';
56                       for(var item in Mylist){
57                           var vala=Mylist;
58                           listHtml+='';
59                           listHtml+='';
60                           ......
61                       }
62                       $(".mainbody").append(listHtml);
63                  }
64              },
65              error:function(e){
66                  swal("网络出错了");
67              }
68          });
69      }
70      71 </script>

2、controller

 1 /**
 2      * AJax获取课程列表
 3      * @param page
 4      * @param currentPage
 5      * @param showCount
 6      * @return
 7      */
 8     @RequestMapping(value="toCourseList")
 9     @ResponseBody
10     public Object toCourseList(Page page,
11             @RequestParam(value="currentPage",required=false) int currentPage,
12             @RequestParam(value="showCount",required=false) int showCount){
13         logBefore(logger, "Ajax获取课程列表");
14         PageData pd=new PageData();
15         Map<String, Object> result=new HashMap<String,Object>();
16         try {
17             pd=this.getPageData();
18             page.setPd(pd);
19             page.setCurrentPage(currentPage);
20             page.setShowCount(showCount);
21             List<PageData> list = courseService.list(page);
22             result.put("list", list);
23             result.put("page", page);
24             result.put("pd", pd);
25         } catch (Exception e) {
26             logger.error(e.toString(), e);
27         }
28         return result;
29     }