juqery 点击分页显示,指定一页显示多少个,首次加载显示多少个
源代码html:
//源代码:html <div class="jq22"> <div class="hidden"> <li><span><img src="images/500x500-1.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-1.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-1.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-1.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-1.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-2.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-2.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-2.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-2.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-2.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-3.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-3.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-3.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-3.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-3.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-4.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-4.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-4.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-4.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-4.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-5.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-5.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-5.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-5.png" width="150" height="150" /></span></li> <li><span><img src="images/500x500-5.png" width="150" height="150" /></span></li> </div> <ul class="list"> <span>数据加载中,请稍后...</span> </ul> <div class="more"><span href="javascript:;" onClick="jq22.loadMore();"></span></div> </div> //源代码css样式 /*点赞用户头像显示*/ .hidden{ display: none;} .jq22{height: auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;} /*.jq22 ul.list{overflow: hidden;}*/ .jq22 ul.list li{width: .514rem;height: .514rem;float: left;overflow: hidden; margin-bottom: .02rem; margin-right: .02rem;} .jq22 ul.list li img{width: 100%;height: 100%;} .jq22 ul.list p{text-align: center;padding: 10px;} .jq22 .more{overflow: hidden;text-align: center; float: left;} .jq22 .more span{display: block;margin:0 auto;background: #F6F6F6 url('../images/zc_7.png') no-repeat center; background-size: .35rem .35rem;width: .514rem;height: .514rem; border: solid .01rem #ACAEB5;} //juqery <script> /*点赞 出现人头像点击显示*/ var _content = []; //临时存储li循环内容 var jq22 = { _default:10, //默认显示图片个数 _loading:5, //每次点击按钮后加载的个数 init:function(){ var lis = $(".jq22 .hidden li"); $(".jq22 ul.list").html(""); for(var n=0;n<jq22._default;n++){ lis.eq(n).appendTo(".jq22 ul.list"); } /*$(".jq22 ul.list img").each(function(){ $(this).attr('src',$(this).attr('realSrc')); })*/ for(var i=jq22._default;i<lis.length;i++){ _content.push(lis.eq(i)); } $(".jq22 .hidden").html(""); }, loadMore:function(){ var mLis = $(".jq22 ul.list li").length; for(var i =0;i<jq22._loading;i++){ var target = _content.shift(); if(!target){ $('.jq22 .more').html(""); break; } $(".jq22 ul.list").append(target); /*$(".jq22 ul.list img").eq(mLis+i).each(function(){ $(this).attr('src',$(this).attr('realSrc')); });*/ } } } jq22.init(); </script>
修改过后的代码:
//修改过后的代码,html可循环使用 //css样式可用源代码里面的 //html <div class="jq22"> <div class="hidden"> //html这里我用到了循环 <volist name="vo['dianzanlist']" id="voo"> <li><span><img src="{$voo['userinfo']['headimgurl']}" width="150" height="150" /></span></li> </volist> </div> <ul class="list"> <span>数据加载中,请稍后...</span> </ul> <div class="more"><span onClick="jq22.loadMore(this);"></span></div> </div> //juqery <script> /*点赞 出现人头像点击显示*/ var _content = []; //临时存储li循环内容 var jq22 = { _default:10, //默认显示图片个数 _loading:5, //每次点击按钮后加载的个数 init:function(){ var list=$('.jq22'); $(list).each(function(key,val){ var lis=$(val).find('.hidden li'); var aa=$(val).find('ul.list'); aa.html(""); for(var n=0;n<jq22._default;n++){ lis.eq(n).appendTo(aa); } if(lis.length <= 10){ $(val).find('.more').remove(); } }); }, loadMore:function(re){ var aaa=$(re).parent().parent()[0]; console.log(aaa); var linshi=$(aaa).find(".hidden li"); for(var i =0;i<jq22._loading;i++){ var target = linshi[i]; $(aaa).find('ul.list').append(target); } if(linshi.length==0){ $(aaa).find('.more').remove(); } } } jq22.init(); </script>