专业网站建设品牌,十四年专业建站经验,服务6000+客户--广州京杭网络
免费热线:400-683-0016      微信咨询  |  联系我们

jquery列表点击加载更多

当前位置:网站建设 > 技术支持
资料来源:网络整理       时间:2023/2/14 0:39:12       共计:3618 浏览
  • <!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>
  • 版权说明:
    本网站凡注明“广州京杭 原创”的皆为本站原创文章,如需转载请注明出处!
    本网转载皆注明出处,遵循行业规范,如发现作品内容版权或其它问题的,请与我们联系处理!
    欢迎扫描右侧微信二维码与我们联系。
    ·上一条:使用jquery获取url及url参数的方法 | ·下一条:C# int转string 每三位加一个逗号

    Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有    粤ICP备16019765号 

    广州京杭网络科技有限公司 版权所有