加载更多JS原理

<div id="news">
  <ul class="news-list">
    <li>内容</li>
  </ul>
</div>
{if $pages}
<div class="load-more"><a>查看更多</a></div>
{/if}
<div class="newspages" id="newspages" style="display:none">
  <a href="/news/">1</a>
  <a href="/news/2.html">2</a>
  <a href="/news/3.html">3</a>
  <a href="/news/4.html">4</a>
  <a href="/news/5.html">5</a>
</div>
<script>
var p = 1;
    $("#news .load-more").delegate("a", "click", function() {
        var originText = $(this).text();
        $(this).addClass("loading").text("...");
        var plast = $("#newspages a").last().html();
        //alert(p+'-'+plast);
        $.ajax({
            url: $('.newspages').find('a').eq(p).attr("href") + "#news",
            success: function(data) {
                result = $(data).find(".news-list li");
                // 渐显新内容
                p++;
                $(".news-list").append(result.fadeIn(300));
                $newElems = result;
                $(".load-more a").removeClass("loading").text(originText);
                if (p < plast) {
                    $(".load-more a").removeClass("loading").text(originText);
                } else {
                    // 若没有链接，即为最后一页，则移除导航
                    $(".load-more").remove();
                }
            }
        });
        return false;
    });

</script>

//随写

<script type="text/javascript">

$("#loadmore").click(function() {
// body...
var _thisobj = $(this);
var pnum = _thisobj.data("key");
var load_url = $("#pages .page-li").eq(pnum).attr("href");
$.ajax({
  type: "GET",
  url: load_url,
  success: function(result){
  if(load_url){
  var new_html = $(result).find("#art-list ul").html();
  if(new_html){
  $("#art-list ul").append(new_html);
  pnum++;
  _thisobj.data("key",pnum);
  }
  }else{
  _thisobj.html("已是最后一页");
  _thisobj.removeAttr("id");
  }
  }
});
});
</script>