jquery列表點擊加載更多

<!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="http://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">數(shù)據(jù)加載中，請稍后...</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; //默認(rèn)顯示圖片個數(shù)
        var _loading = 5; //每次點擊按鈕后加載的個數(shù)
        var _content = [];//用來存儲li循環(huán)內(nèi)容
        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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末俺夕，一起剝皮案震驚了整個濱河市衡楞，隨后出現(xiàn)的幾起案子死嗦，更是在濱河造成了極大的恐慌褒繁，老刑警劉巖犬庇，帶你破解...
    沈念sama閱讀 219,589評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件俯渤，死亡現(xiàn)場離奇詭異呆细，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)八匠，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評論 3贊 396
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門絮爷，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人梨树，你說我怎么就攤上這事坑夯。” “怎么了抡四？”我有些...
    開封第一講書人閱讀 165,933評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵渊涝，是天一觀的道長。 經(jīng)常有香客問我床嫌，道長跨释，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,976評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任厌处，我火速辦了婚禮鳖谈，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘阔涉。我一直安慰自己缆娃，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 67,999評論 6贊 393
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布瑰排。 她就那樣靜靜地躺著贯要，像睡著了一般。 火紅的嫁衣襯著肌膚如雪椭住。 梳的紋絲不亂的頭發(fā)上崇渗，一...
    開封第一講書人閱讀 51,775評論 1贊 307
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音京郑，去河邊找鬼宅广。 笑死，一個胖子當(dāng)著我的面吹牛些举，可吹牛的內(nèi)容都是我干的跟狱。 我是一名探鬼主播，決...
    沈念sama閱讀 40,474評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼户魏，長吁一口氣：“原來是場噩夢啊……” “哼驶臊！你這毒婦竟也來了挪挤？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,359評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤关翎，失蹤者是張志新（化名）和其女友劉穎扛门，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體笤休，經(jīng)...
    沈念sama閱讀 45,854評論 1贊 317
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡尖飞，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,007評論 3贊 338
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了店雅。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片政基。...
    茶點故事閱讀 40,146評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖闹啦，靈堂內(nèi)的尸體忽然破棺而出沮明，到底是詐尸還是另有隱情，我是刑警寧澤窍奋，帶...
    沈念sama閱讀 35,826評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布荐健，位于F島的核電站，受9級特大地震影響琳袄，放射性物質(zhì)發(fā)生泄漏江场。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,484評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一窖逗、第九天 我趴在偏房一處隱蔽的房頂上張望址否。 院中可真熱鬧，春花似錦碎紊、人聲如沸佑附。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評論 0贊 22
  • 一樁弒父案仗考，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽音同。三九已至，卻和暖如春秃嗜，著一層夾襖步出監(jiān)牢的瞬間权均，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工痪寻， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留螺句，地道東北人。 一個月前我還...
    沈念sama閱讀 48,420評論 3贊 373
  • 代替公主和親
    正文 我出身青樓橡类，卻偏偏與公主長得像，于是被迫代替她去往敵國和親芽唇。 傳聞我的和親對象是個殘疾皇子顾画，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,107評論 2贊 356

推薦閱讀更多精彩內(nèi)容