AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

jquery列表点击加载更多

2018-08-23 19259
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原生点击按钮加载更多(懒加载，每次加载N个) *{margin: 0;padding:0;list-style: none;} body{background: #333;font-size:... 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>原生点击按钮加载更多(懒加载，每次加载N个)</title>
    <style>
    *{margin: 0;padding:0;list-style: none;}
    body{background: #333;font-size: 14px;font-family:"微软雅黑"}
    a{color: #333;text-decoration: none;}
    .hidden{ display: none;}
    .lanren{width: 800px;height: auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}
    .lanren ul.list{overflow: hidden;}
    .lanren ul.list li{width: 150px;height: 150px;margin:5px;float: left;overflow: hidden;}
    .lanren ul.list li img{width: 100%;height: 100%;}
    .lanren ul.list p{text-align: center;padding: 10px;}
    .lanren .more{overflow: hidden;padding:10px;text-align: center;}
    .lanren .more a{display: block;width: 80px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:3px;}
    .lanren .more a:hover{text-decoration: none;background: red;color: #fff;}
    </style>
</head>
<body>
<div style="margin:auto;width:830px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 详情页banner -->
<ins class="adsbygoogle"
     style="display:inline-block;width:830px;height:120px"
     data-ad-client="ca-pub-4078329886972765"
     data-ad-slot="4189420132"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>  <!--代码部分begin-->
    <div class="lanren">
        <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="javascript:loadMore();">加载更多</a></div>
    </div>
    <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
    <script>
        var _default = 10; //默认显示图片个数
        var _loading = 5; //每次点击按钮后加载的个数
        var _content = [];//用来存储li循环内容
        function init(){
            var lis = $(".lanren .hidden li");
            $(".lanren ul.list").html("");
            for(var n=0;n<_default;n++){
                lis.eq(n).appendTo(".lanren ul.list");
            }
            $(".lanren ul.list img").each(function(){
                $(this).attr('src',$(this).attr('realSrc'));
            })
            for(var i=_default;i<lis.length;i++){
                _content.push(lis.eq(i));
            }
            $(".lanren .hidden").html("");
        }
        init();
        function loadMore(){
            var k =0,t,i;
            var mLis = $(".lanren ul.list li").length;
            for(i= mLis-_default;i<mLis-_loading;i++){
                if(i == _content.length){
                    $('.lanren .more').html("<p>全部加载完毕...</p>");
                    break;
                }
                _content[i].appendTo(".lanren ul.list");
                t = mLis + k;
                k++;
                $(".lanren ul.list img").eq(t).each(function(){
                    $(this).attr('src',$(this).attr('realSrc'));
                });
            }
        }
    </script>
    <!--代码部分end-->
</body>
</html>
文章标签：
JavaScript
前端开发
存储
关键词：
jQuery点击
jQuery列表
php的小菜鸟
目录
相关文章
祈澈菇凉
|
JavaScript
jQuery实现动态添加和删除（点击按钮添加在页面添加和删除元素）
jQuery实现动态添加和删除（点击按钮添加在页面添加和删除元素）
祈澈菇凉
85 0
极客小俊
|
JavaScript 开发者
哇塞! 我可以使用jQuery实现点击弹出彩色文字动画效果 【附完整代码】
用jQuery实现点击弹出彩色文字动画效果
极客小俊
84 0
哇塞! 我可以使用jQuery实现点击弹出彩色文字动画效果 【附完整代码】
卡尔特斯
|
JavaScript
jQuery 展开列表
jQuery 展开列表
卡尔特斯
48 0
卡尔特斯
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
卡尔特斯
54 0
乐多_L
|
3月前
|
JavaScript Java
点击按钮，向下添加目录。Java script+jQuery写法
点击按钮，向下添加目录。Java script+jQuery写法
乐多_L
23 1
乐多_L
|
3月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
乐多_L
20 1
爱吃糖的范同学
|
6月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
爱吃糖的范同学
226 0
前端.火鸡
|
6月前
|
JavaScript 前端开发
jquery怎么给循环出来的列表（类似于text框）取值和赋值
jquery怎么给循环出来的列表（类似于text框）取值和赋值
前端.火鸡
39 0
jquery怎么给循环出来的列表（类似于text框）取值和赋值
祈澈菇凉
|
JavaScript 前端开发
jQuery点击图片来回切换功能
jQuery点击图片来回切换功能
祈澈菇凉
100 0
jQuery点击图片来回切换功能
祈澈菇凉
|
JavaScript 数据库
jQuery点击图片开启，再次点击图片关闭效果
jQuery点击图片开启，再次点击图片关闭效果
祈澈菇凉
49 0