码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-12-16 11:23:01      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:func   default   shift   otto   样式   end   console   eal   fun   

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

 

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

标签:func   default   shift   otto   样式   end   console   eal   fun   

原文地址:http://www.cnblogs.com/zc290987034/p/8045928.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!