先看一下效果：

默認顯示6條數據，點擊一次加載更多追加顯示6條，直到數據全部顯示完全，隱藏加載更多按鈕。

列表頁引入一下文件：

<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery.showMore.js"></script>
<script type="text/javascript">
    //調用顯示更多插件。參數是標準的 jquery 選擇符 
    $.showMore(".showMoreNChildren,.clearfix");
</script>

其中核心js文件jquery.showMore.js

// JavaScript Document

(function () {
  var showMoreNChildren = function ($children, n) {
    //顯示某jquery元素下的前n個隱藏的子元素
    var $hiddenChildren = $children.filter(":hidden");
    var cnt = $hiddenChildren.length;
    for (var i = 0; i < n && i < cnt ; i++) {
      $hiddenChildren.eq(i).show();
    }
    return cnt - n;//返回還剩余的隱藏子元素的數量
  }
  
  jQuery.showMore = function (selector) {
    if (selector == undefined) { selector = ".showMoreNChildren" }
    //對頁中現有的class=showMorehandle的元素，在之後添加顯示更多條，並綁定點擊行為
    $(selector).each(function () {
      var pagesize = $(this).attr("pagesize") || 10;
      var $children = $(this).children();
      if ($children.length > pagesize) {
        for (var i = pagesize; i < $children.length; i++) {
          $children.eq(i).hide();
        }
  
        $("<div class=‘showMorehandle‘ >加載更多</div>").insertAfter($(this)).click(function () {
          if (showMoreNChildren($children, pagesize) <= 0) {
            //如果目標元素已經沒有隱藏的子元素了，就隱藏“點擊更多的按鈕條”
            $(this).hide();
          };
        });
      }
    });
  }
})();

原理：

頁面上是全部的數據，只是按照頁面顯示要求，自己規定顯示部分範圍，其余隱藏。如果還有數據，點擊加載更多，繼續追加幾條數據；直到沒有更多數據了，就會隱藏加載更多按鈕。

本文出自 “Jack_phpcms” 博客，請務必保留此出處http://maifang158.blog.51cto.com/5433990/1962671

phpcms列表頁js實現加載更多效果