jquery列表点击加载更多-低调大师

jquery列表点击加载更多

2018-08-22 496

<!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>

微信关注我们

原文链接：https://yq.aliyun.com/articles/658062

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Java 面向对象之多态

http://www.verejava.com/?id=16992838437553 /** 知识点：多态 Polymorphism 1. 对象的多态性分为三种: 方法的重载, 方法的覆盖, 对象的向上向下转型 2. 基本类型的向上向下转型 3. 对象的向上向下转型 : 必须发生在子类和父类之间注意: 1. 子类对象可以转换成父类对象但是转换后子类属性和方法不可见当再转换成子类的时候要强制类型转换 2. 如果直接实例父类然后转成子类不允许报异常 ClassCastException 3. 当子类复写了父类的方法, 子类转成父类后调用的是子类复写的方法。 */ public class Polymorphism { public static void main(String[] args) { //类型的转换 byte a = 1; int b = 100; int c = 200; //小类型 -> 大类型 b = a; System.out.println(b); //大类型 -> 小类型必须经过强制类型转换并且转换以后可能丢失精度 a = (...

2018-08-23

557

我们知道在21世纪，对我们生活影响最大的莫过于互联网的发展和应用了，随着互联网的逐渐发展，大家已经逐渐不再满足于网络之间的联系，开始逐渐往实物当中发展联系，这也就是物联网的诞生。物联网作为新一代信息技术的重要领域，逐渐由工业应用拓展到家用领域，通过打通“物与物”之间的连接，构造起一个万物互联的时代。简而言之，物联网通过传感器等外接设备将工业设备、汽车和家用电器等物品连接在一起，记录工艺流程、生活习惯等数据，然后再通过后端强大的数据分析能力服务于生产、生活方式。虽然物联网运营商一直宣称能够有效保护用户的数据安全和隐私，但是一系列的安全漏洞和隐私泄露事件的发生使用户无法真正信任运营服务提供商能够实现他们的承诺。但是结合区块链的物联网就恰好可以解决这一问题。目前物联网在网络安全上还是存在着不信任的因素，但是区块链可以使机器节点之间互相形成自治，形成有价值的自治物联网，由于区块链本身不可篡改的特性摆在那里，所以在前端可以通过区块链技术进行滤化，记录有效信息，这样的情况下，执行会更加准确。区块链技术可以为物联网提供点对点直接互联的方式来传输数据，而不是通过中央处理器，这样分布式的计算就...

2018-08-23

598

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Apache Tomcat

Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta 项目中的一个核心项目，由Apache、Sun 和其他一些公司及个人共同开发而成。因为Tomcat 技术先进、性能稳定，而且免费，因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web 应用服务器。

Eclipse

Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括Java开发工具（Java Development Kit，JDK）。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。