jQuery点击加载更多

使用方法：

引入核心CSS样式

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

引入jQuery库文件

<script src="jquery-1.10.2.js"></script>

初始化、参数配置

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

HTML结构

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