JS实现网站点击加载更多翻页功能

我们通常在做网站时，如果一个栏目下的内容过多，我们会使用分页功能来将内容进行分页展示。如下图：

今天我们介绍一下除了分页之外，我们展示的另一种方法，就是点击加载更多功能。如下图：

如何自己做网站时，将自己的网站内容使用这种加载更多功能呢？下面是实现网站点击加载更多功能方法。

方法/步骤

1. 首先将自己的栏目的列表代码，使用<div class=”wzcon”>这个DIV包裹；示例代码：

   
   <div class="wzcon">
   
   <div class="hidden">
   
   <li><img src="images/1px.gif" realSrc="images/500x500-1.png" width="150" height="150" /></li>
   
   <li><img src="images/1px.gif" realSrc="images/500x500-1.png" width="150" height="150" /></li>
   
   <li><img src="images/1px.gif" realSrc="images/500x500-1.png" width="150" height="150" /></li>
   
   <li><img src="images/1px.gif" realSrc="images/500x500-1.png" width="150" height="150" /></li>
   
   <li><img src="images/1px.gif" realSrc="images/500x500-1.png" width="150" height="150" /></li>
   
   <li><img src="images/1px.gif" realSrc="images/500x500-2.png" width="150" height="150" /></li>
   
   </div>
   
   <ul class="list">数据加载中，请稍后...</ul>
   
   <div class="more"><a href="javascript:;" onClick="wzcon.loadMore();">加载更多</a></div>
   
   </div>
   
   

2. 将以下的CSS样式放到自己网站的CSS样式表里，操作样式；

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

3. 最后引入点击加载更多功能实现的必需的JS代码，直接放在</body>标签上方即可！

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

4. 这样，就可以实现点击加载更多功能效果了。如果使用WORDPRESS程序，可以使用方法：WordPress网站实现点击加载下一页文章列表。