jquery ias流式分页插件添加

下载ias插件

下载地址：https://github.com/webcreate/Infinite-Ajax-Scroll

引入js插件

<div class="content">  
  <#if articles?exists> <!--这里的#if是freemarker语法，用来判断是否有数据，然后进行循环展示-->  
    <#list articles as article>  
      <article class="excerpt excerpt-1"><a class="focus" href="/article/${article.contentId}.html" title="">  
      <img class="thumb" data-original="${article.imgurl}" src="${article.imgurl}" alt=""></a>  
        <header><a class="cat" href="/category/${article.categoryId}.html">${article.categoryValue}<i></i></a>  
          <h2><a href="/article/${article.contentId}.html" title="">${article.title}</a></h2>  
        </header>  
        <p class="meta">  
          <time class="time"><i class="glyphicon glyphicon-time"></i> ${article.createDate}</time>  
          <span class="views"><i class="glyphicon glyphicon-eye-open"></i>   
          共${article.click}人围观</span> <a class="comment" href="article.html#comment">  
          <i class="glyphicon glyphicon-comment"></i> ${article.comment}个评论</a></p>  
        <p class="note">${article.abstr} ... </p>  
      </article>  
    </#list>  
  </#if>  
  <nav class="pagination" style="display: none;">  
    <ul>  
      <li class="prev-page"></li>  
      <#if nextPage?exists>  
        <li class="next-page"><a href="/page/${nextPage}">下一页</a></li>  
      </#if>  
      <li><span>共 ${pageNum} 页</span></li>  
    </ul>  
  </nav>  
</div> 

温馨提示

需要注意的是container，item，pagination，next，必须要一一对应

//无限滚动反翻页  
jQuery.ias({  
    history: false,  
    container: '.content',  
    item: '.excerpt',  
    pagination: '.pagination',  
    next: '.next-page a',  
    trigger: '查看更多',  
    loader: '<div class="pagination-loading"><img src="/images/loading.gif" /></div>',  
    triggerPageThreshold: 5,  
    onRenderComplete: function () {  
        $('.excerpt .thumb').lazyload({  
            placeholder: '/images/occupying.png',  
            threshold: 400  
        });  
        $('.excerpt img').attr('draggable', 'false');  
        $('.excerpt a').attr('draggable', 'false');  
    }  
});

分页java代码

@RequestMapping("/page/{num}")  
   public String page(Model model, @PathVariable int num) {  
       //获取点击量和评论量  
       List<Count> countList = countService.getCountList();  
       //获取最新发布的文章  
       List<Article> list = articleService.getArticleList(num, countList);  
       model.addAttribute("articles", list);  
       //总数  
       int count = articleService.getArticleSize();  
       //总页数  
       int pageNum = count / 5;  
       model.addAttribute("pageNum", pageNum);  
       if (pageNum > num) {  
           model.addAttribute("nextPage", num + 1);  
       }  
       //今日推荐  
       List<Article> top2 = articleService.getTopArticleList("2");  
       model.addAttribute("now", top2.get(0));  
       return "homepage/index";  
   }