素材牛VIP会员

jQuery点击按钮加载更多(懒加载,每次加载N个)

 所属分类:网页特效-分页/文件树

 浏览:12861次  评论:0次  更新时间:2016-11-12
牛币素材VIP可免积分下载
jQuery点击按钮加载更多(懒加载,每次加载N个)兼容IE9
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:原生点击按钮加载更多(懒加载,每次加载N个)

详细介绍

使用方法:

引入核心CSS样式(根据自身项目样式进行修改)

.hidden{ display: none;}
.myweb{width: 800px;height: auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}
.myweb ul.list{overflow: hidden;}
.myweb ul.list li{width: 150px;height: 150px;margin:5px;float: left;overflow: hidden;}
.myweb ul.list li img{width: 100%;height: 100%;}
.myweb ul.list p{text-align: center;padding: 10px;}
.myweb .more{overflow: hidden;padding:10px;text-align: center;}
.myweb .more a{display: block;width: 80px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:3px;}
.myweb .more a:hover{text-decoration: none;background: red;color: #fff;}

引入jQuery库文件

<script src="jquery.min.js"></script>

JS结构

var _content = []; //临时存储li循环内容
var lanren = {
    _default:10, //默认显示图片个数
    _loading:5,  //每次点击按钮后加载的个数
    init:function(){
        var lis = $(".myweb .hidden li");
        $(".myweb ul.list").html("");
        for(var n=0;n<lanren._default;n++){
            lis.eq(n).appendTo(".myweb ul.list");
        }
        $(".myweb ul.list img").each(function(){
            $(this).attr('src',$(this).attr('realSrc'));
        })
        for(var i=lanren._default;i<lis.length;i++){
            _content.push(lis.eq(i));
        }
        $(".myweb .hidden").html("");
    },
    loadMore:function(){
        var mLis = $(".myweb ul.list li").length;
        for(var i =0;i<lanren._loading;i++){
            var target = _content.shift();
            if(!target){
                $('.myweb .more').html("<p>全部加载完毕...</p>");
                break;
            }
            $(".myweb ul.list").append(target);
            $(".myweb ul.list img").eq(mLis+i).each(function(){
                $(this).attr('src',$(this).attr('realSrc'));
            });
        }
    }
}
lanren.init();

HTML结构

<div class="myweb">
    <div class="hidden">
        <li><img src="images/1px.gif" realSrc="images/lanren01.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren02.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren03.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren04.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren05.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren06.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren07.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren08.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren09.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren10.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren11.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren12.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren13.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren14.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren15.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren16.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren17.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren18.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren19.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren20.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren21.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren22.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren23.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren24.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren25.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren26.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren27.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren28.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren29.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren30.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren31.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren32.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren33.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren34.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren35.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren36.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren37.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren38.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren39.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren40.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren41.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren42.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren43.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren44.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren45.jpg" width="150" height="150" /></li>
    </div>
    <ul class="list">数据加载中,请稍后...</ul>
    <div class="more"><a href="javascript:;" onClick="lanren.loadMore();">加载更多</a></div>
</div>

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)