js瀑布式动态触发加载数据(手机微博，空间下拉动态显示效果)

实际项目中用的是table和jquery mobile，，加载的XML文件内容，实际如果从后台获得其他数据，过程会比XML文件简单，摘取部分重点代码：

var page = 0;
var num = 10;
var allCount = 0;

var loading_flag = false; 

 $(function () {

       $(document).scroll(function () {
                var bottom_padding = $(document).height() - $(document).scrollTop() - $(window).height();  //下拉触发
                if (bottom_padding < 50 && !loading_flag) {
                    loading_flag = true;
                    page_more();
                }
            });

});

function getPage(p, n, isFirst, path) {
            var count = 0;
            if (path != null && path != "") {
                $.get(path, "", function (data) {
                    $(data).find("XX").find("XXX").each(function () {
                        loading_flag = false;
                        if (isFirst) {
                            allCount++;
                        } else {
                            if (allCount <= (p + 1) * n) {
                                $("#infscr-loading").css("display", "none");
                                loading_flag = true;
                            }
                        }
                        while (count < p * n) {
                            count++;
                            return true;
                        }
                        while ((count >= p * n) && count < (p + 1) * n) {
                            var Channel = $(this);
                            var type = null;
                            if (Channel.attr("XXX") == "1") {
                                type = $("#XXX").val();
                            } else if (Channel.attr("XX") == "0") {
                                type = $("#XXX").val();
                            } else {
                                type = "DI";
                            }
                            var tr = "<tr id='tr_" + Channel.attr("XXX") + "'><th class=\"ui-table-priority-1\">" + Channel.attr("XXX") + "</th>";
                            tr += "<td>" + Channel.attr("XXXX") + "</td>";
                            tr += "<td class=\"ui-table-priority-3\">" + Channel.attr("XXXX") + "</td>";
                            tr += "<td class=\"ui-table-priority-2\">" + type + "</td>";
                            tr += "<td class=\"ui-table-priority-4\">" + Channel.attr("XXXX") + "</td>";
                            if (Channel.attr("XXX") == "" || Channel.attr("XXX") === undefined) {
                                tr += "<td class=\"ui-table-priority-5\"></td></tr>";
                            } else {
                                tr += "<td class=\"ui-table-priority-5\">" + Channel.attr("XXX") + "~" + Channel.attr("XXX") + "</td></tr>";
                            }

                            $("#table-custom-2").find("tbody").append(tr).trigger('create');
                            $("#table-custom-2").table("refresh");
                            count++;
                            return true;
                        }
                        while (count >= (p + 1) * n) {
                            if (isFirst) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    });
                    $("#uploadset").css("display", "none");
                }).error(function (XMLHttpRequest, textStatus, errorThrown) {
                    if (XMLHttpRequest.status == "0") {
                        errorPrint("0", top.lang, "rmsg");
                    } else {
                        $("#rmsg").css("color", "red");
                        $("#rmsg").html(XMLHttpRequest.status + " " + XMLHttpRequest.statusText);
                        $("#rmsg").show();
                    }
                    $("#uploadset").css("display", "none");
                });
            }
        }

        function page_more() {
            page = page + 1;
            getPage(page, num, false, filePath);
        }

HTML:

<table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-text="选择列" data-theme="b" data-column-btn-theme="c">
                    <thead>
                        <tr>
                            <th id="ChnnlNO"></th>
                            <th data-priority="2" id="OriginalValue"></th>
                            <th data-priority="1" id="ConvertedValue"></th>
                            <th data-priority="3" id="ChnnlType"></th>
                            <th data-priority="4" id="ChnnlName"></th>
                            <th data-priority="5" id="ReferRange"></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>