您现在的位置是：首页 > 文章详情

jquery列表点击加载更多

日期：2018-08-22点击：437收藏

<!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业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。