点击加载更多

当所有数据都显示出来时，前端做加载更多功能

<div class="main">
    <ul class="showMore">
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
         <li class="news_item"></li>
     </ul>
     <div class="news_list_btn" style="visibility: hidden;"></div>
</div>

js代码：

//封装一个函数-点击加载更多
function showMore(button, ul, showNumber, loadNumber) {
    var list = showNumber;
    var ul = $(ul);
    var sum = ul.find("li").hide().size();
    if (sum > list) {
        $(button).css("visibility", "visible")
        ul.find("li:lt(" + list + ")").show()
    }
    else {
    	ul.find("li").show().size();
        $(button).css("visibility", "hidden");
    }
    $(button).on("click", function() {
        list += loadNumber;
        ul.find("li:lt(" + list + ")").slideDown();
        if (list >= sum) {
            $(this).css("visibility", "hidden");
        }
    });
}
/*
button:点击按钮
ul：列表ul
showNumber:第一次展示的个数
loadNumber:点击一次加载的个数
*/
showMore(".news_list_btn", ".showMore", 7, 4);

亲测有效