先看一下效果：
650) this.width=650;" src="https://s3.51cto.com/wyfs02/M01/A4/8D/wKioL1mtXzSDg9XEAAB56QVVatc502.png-wh_500x0-wm_3-wmp_4-s_1899872139.png" title="QQ截图20170904220845.png" alt="wKioL1mtXzSDg9XEAAB56QVVatc502.png-wh_50" />
默认显示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实现加载更多效果
原文地址：http://maifang158.blog.51cto.com/5433990/1962671