如何制作网站加载更多功能

当我们网页的内容比较多的情况下，如果不想一下子展示出来，就可以使用加载更多功能。让用户点击按钮后，再展开更多的内容。效果如下图：

下面介绍一下怎么制作这种制作网站加载更多功能。

制作网站加载更多功能时分为三部分，分别为HTML代码、CSS代码、JQUERY代码。

HTML代码就是正常的UL标签：

[cce_php]<div class="jq22">
<div class="hidden">
<li><img src="https://www.xuewangzhan.net/why/kaifa/static/picture/1px.gif" realSrc="https://www.xuewangzhan.net/why/kaifa/images/500x500-1.png" width="150" height="150" /></li>
<li><img src="https://www.xuewangzhan.net/why/kaifa/static/picture/1px.gif" realSrc="https://www.xuewangzhan.net/why/kaifa/images/500x500-1.png" width="150" height="150" /></li>
……
……
</div>
<ul class="list">数据加载中，请稍后...</ul>
<div class="more"><a href="javascript:;" rel="external nofollow"  onClick="jq22.loadMore();">加载更多</a></div>
</div>

[cce_php]
JQUERY代码用于点击后展示更多的内容：

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

[cce_php]
CSS代码用于控制展示的样式：

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

[cce_php]
通过这三个代码就可以在自己做网站时，制作出这种加载更多的功能了。