代码说明，页面是用freemarker写的，newsModel.list  是所有的数据；

 <ul class="affair_list" pagesize="3">  这句是关键

<#if type=='news'>

                <ul class=" affair_list" pagesize="3">
                    <#if newsModel?? && newsModel.list??> <#list
                    newsModel.list as list>
                    <li><a href="javascript:void(0);"
                        onclick="newsD(${list.id})">
                            <div class="datetime">
                                <p class="day">
                                    <span class="">${list.publishDate?string('dd')!''}</span>
                                </p>
                                <p class="month">
                                ${list.publishDate?string('MM')!''}</p>
                            </div>
                            <div class="item_content">
                                <h5 class="otw">${list.title!''}</h5>
                                <p>${list.content!''}</p>
                                <em>&rarr;</em>
                            </div>
                    </a></li>
                     </#list> </#if>
                </ul>
                </#if>
                <p class=" load_more">

                </p>

//下面是js代码

<script type="text/javascript">
    $(function() {
        var affair_list = function ($children, n) {
            //显示某jquery元素下的前n个隐藏的子元素
            var $hiddenChildren = $children.filter(":hidden");
            var cnt = $hiddenChildren.length;
            for ( var i = 0; i < n && i < cnt ; i++) {
                $hiddenChildren.eq(i).slideDown();
            }
            return cnt-n;//返回还剩余的隐藏子元素的数量
        }
        var selector
        if (selector == undefined) { selector = ".affair_list" }
        $(selector).each(function () {
            var pagesize = $(this).attr("pagesize") || 10;
            console.log(pagesize);
            $(this).find("li:lt("+pagesize+")").show();
            var $children = $(this).children();
            if ($children.length > pagesize) {
                for (var i = pagesize; i < $children.length; i++) {
                    $children.eq(i).hide();
                }
                $("<p class='load_more'>加载更多</p>").insertAfter($(this)).click(function () {
                    if (affair_list($children, pagesize) <= 0) {
                        //如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
                        $(this).hide();
                    };
                });
            }
        });
    });

    </script>

//个人觉得这样的做法会在后期数据量很大时，效率太慢，可以考虑第二种，分页的逻辑，用ajax进行请求