點擊按鈕加載更多

<!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;
        }
        
        .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>
</head>
<body>
    <!--代碼部分begin-->
    <div class="jq22">
        <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>
            <li><img src="images/1px.gif" realSrc="images/500x500-2.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-2.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-2.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-2.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-3.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-3.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-3.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-3.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-3.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-4.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-4.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-4.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-4.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-4.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-5.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-5.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-5.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-5.png" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/500x500-5.png" width="150" height="150" /></li>
        </div>
        <ul class="list">數(shù)據(jù)加載中，請稍后...</ul>
        <div class="more"><a href="javascript:;" onClick="jq22.loadMore();">加載更多</a></div>
    </div>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        var _content = []; //臨時存儲li循環(huán)內(nèi)容
        var jq22 = {
            _default: 10, //默認(rèn)顯示圖片個數(shù)
            _loading: 5, //每次點擊按鈕后加載的個數(shù)
            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>
    <!--代碼部分end-->
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容