“懒人式”点击加载更多

所谓懒人式，就是每次点击不请求后台
后台一次返回所有数据，前端分次接收，每次点击加载一部分
（也可以叫橘氏加载法）
直接上代码：

<div class="hideT"> 
	            <c:forEach var="teacher" items="${teamList}">
            		<div class="card card_small_with_image grid-item" name="hideTeam"> 
		              <a href="#"> <img class="card-img-top" src="${teacher.cover}" alt="" /> </a> 
		              <div class="card-body"> 
		               <div class="card-title card-title-small"> 
		                <a href="${CMS}/web/main/teacherDetail?teacherId=${teacher.id}">${teacher.otherName1} ${teacher.user.sex} 舞龄${teacher.danceAge}年</a> 
		                <span class="right type">
		                	<c:forEach var="type" items="${teacher.danceTypeList}" varStatus="index">
		                	${type.typeName} <c:if test="${index.last==false}">|</c:if>
		                	</c:forEach>
		                </span> 
		               </div> 
		               <small class="post_meta" style="display:inline;">
		               	<c:forEach var="service" items="${teacher.danceServiceList}" varStatus="index">
		                	<c:if test="${index.first==false}"><span></c:if>
		                	<a href="#">${service.serviceName}</a>
		                	<c:if test="${index.first==false}"></span></c:if>
	                	</c:forEach>
		               </small>
		               <div style="display:inline-block;float:right"> 
		                <button type="button" class="reply_button ml-auto">联系TA</button>
		               </div> 
		              </div> 
		             </div> 
                </c:forEach>
            </div> 
            
             <div class="mess" id="team">
             
           	 </div> 
           	 
           <div class="load_more clear"> 
              <div id="load_more" class="load_more_button text-center trans_200" onclick="lanren.loadMore();">
               Load More
              </div> 
             </div>

js代码

 /*点击加载更多*/
    var _content = []; //临时存储li循环内容
		var lanren = {
			_default:3, //默认个数
			_loading:3,  //每次点击按钮后加载的个数
			init:function(){
				var lis = $("div[name=hideTeam]");
				console.log(lis);
				$("#team").html("");
				for(var n=0;n<lanren._default;n++){
					lis.eq(n).appendTo("#team");
				}
				for(var i=lanren._default;i<lis.length;i++){
					_content.push(lis.eq(i));
				}
				$(".hideT").html("");
			},
			loadMore:function(){
				var mLis = $("#team div[name=hideTeam]").length;
				for(var i =0;i<lanren._loading;i++){
					var target = _content.shift();
					if(!target){
						$('#load_more').html("全部加载完毕...");
						break;
					}
					$("#team").append(target);
				}
			}
		}
		lanren.init();

原理其实就是把所有数据放进一个数组，设定初始值和每次显示的数量，然后每次点击显示一部分~