JS實現點擊加載更多效果

適用場景：后端直接把所有的文章都給你調出來了，但是領導又讓做點擊加載更多效果。。。（寶寶心里苦啊）

 

點擊加載更多效果：

        第一個和第二個參數分別是btn和ul的DOM（必填）

        第三個參數，默認顯示條數（必填）

        第四個參數，每次加載的條數（必填）

        第五個參數，slideDown的速度，類型是數字，默認為400（選填）

 

CSS部分

        a.load-more{   /* 點擊按鈕 */

                visibility: hidden;

        }

 

JS代碼

     function giveMore(button,targetUl,showNumber,loadNumber,speed){

            var list = showNumber;

            var ul = jQuery(targetUl);

            var sum = ul.find("li").hide().size();

            if(sum > list) jQuery(button).css("visibility","visible");

            ul.find("li:lt(" + list + ")").show();

            jQuery(button).on("click",function(){

                list += loadNumber;

                ul.find("li:lt(" + list + ")").slideDown(speed?speed:400);

                if(list >= sum) jQuery(this).css("visibility","hidden");

            });

        }

      giveMore(".give-more-blog","#blog-mainbody",8,4,200);    // 只需要改下對應的參數即可

 

總結：代碼有可以優化的地方，期待大佬指教。