JS实现页面加载更多功能

html

<div class="loading">
            <div class="hidden">
                  <ul class="layui-timeline">
                       <c:forEach items="${list}" var="node">
                            <c:if test="${node.identity == 1}">
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">
                                            <fmt:formatDate value="${node.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                        </h3>
                                        <p>
                                                ${node.userName}： ${node.commentContent}
                                        </p>
                                        <p>
                                            <button class="reply layui-btn layui-btn-radius layui-btn-normal">回复</button>
                                            <input type="hidden" value="${node.videoId}" class="videoId">
                                            <input type="hidden" value="${userId}" class="userId">
                                            <input type="hidden" value="${node.id}" class="commentId">
                                            <button class="hideButton layui-btn layui-btn-radius layui-btn-normal">取消</button>
                                        </p>

                                    </div>
                                </li>
                            </c:if>
                            <c:if test="${node.identity == 2}">
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <h3 class="layui-timeline-title">
                                            <fmt:formatDate value="${node.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                        </h3>
                                        <p>
                                                ${node.userName}： ${node.commentContent}
                                        </p>
                                    </div>
                                </li>
                            </c:if>
                </c:forEach>
            </ul>
    </div>
        <ul class="list">数据加载中，请稍后...</ul>
        <div style="display: none;" data-bind="visible: isProductsLoading">
            <div id="pager_loading"></div>
        </div>
        <div class="container">
            <div class="alert alert-info text-center">
                <a href="javascript:;" onClick="loading.loadMore();"><div class="more">加载更多</div></a>
            </div>
        </div>
    </div>

js

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