juqery 点击分页显示，指定一页显示多少个，首次加载显示多少个

Posted 2020-10-17 遇事稳坐钓鱼台

源代码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>