div 滚动条 拖到底部 自动加载数据

[wrost]

怎么让div 滚动条 拖到底部 自动加载数据， 就像sina微博那样

[大葡萄八块一斤]

请搜索滚动加载插件

[以专业开发人员为伍]

根据滚动条的高度值（负数值），以及当前页面高度，你完全可以判断当前应该显示哪一个（或者几个）页面。 例如当前页面中高度1000，每DIV高度800，而滚动出去了700那么你就知道应该显示1、2、3共3个页面。 然后遍历一下同一个class的DIV吧，看看所加载的页面是否够3页？如果不够则在后边追加div。

[gengchenhui]

js瀑布流？嗯，他们叫这个名字。。。

[Assassin_]

计算滚动条位置 。到底部的时候 ajax 请求数据 。append到div里就好了

[wrost]

谢谢大家，我先去看看ajax，然后看看jq怎么检测窗口位置

[joyhen]

$(function() {
            $(window).bind("scroll", function() {
                var top = document.documentElement.scrollTop + document.body.scrollTop;
                var textheight = $(document).height();
                var curnum = parseInt($("#hidtxtPdnum").val());
                if (curnum >= 3) { $(".lodingBarStyle").remove(); }
                if (textheight - top - $(window).height() <= 100) {
                    $("#hidtxtPdnum").val(curnum + 1);
                    if (curnum >= 3) {
                        return;
                    }
                                                
                    $.ajax({
                        type: "get",
                        url: "ajax/getInfo.aspx?ppage=" + curnum + "&acDate=" + (new Date().getTime()),
                        success: function(msg) {
                            var $boxes = $(msg);
                            $('#container').append($boxes).masonry('appended', $boxes, true);
                        },
                        error: function() {
                            alert("参数出错，刷新后重试");
                            return false;
                        }
                    });
                }
            });

[夜色镇歌]

找个插件用用得了

[wrost]

引用 7 楼 a346729576 的回复:

找个插件用用得了

在加载数据的定制上，插件不太灵活

[wrost]

现在数据能ajax加载了，要开始探测 滚动条 ，判断是否滚到底部

        function GetWeibo(IsFirst) {

            var chatId = 0 
            if (IsFirst > 0)
            { chatId = $("div.weibo").last().attr("id"); }

            $.ajax({
                type: "get",
                url: "/UserManage/ChatWeiboList",
                data:"&chatId="+chatId,
                error: function (res, status, ex) { alert("对不起，暂时不能获取内容"); },
                success: function (cms) {
                    if (cms == "0") { alert("没有更久的数据了"); }
                    else {
                        //alert("动态信息载入成功，谢谢支持！");
                        if (IsFirst = 0)
                        { $("#weibo").html(cms); }
                        else 
                        { $("#weibo").append(cms); }
                    }
                }
            });
        }

[FeoniXX]

引用 6 楼 Joyhen 的回复:

$(function() {
            $(window).bind("scroll", function() {
                var top = document.documentElement.scrollTop + document.body.scrollTop;
                var textheight = $(document).height();
                var curnum = parseInt($("#hidtxtPdnum").val());
                if (curnum >= 3) { $(".lodingBarStyle").remove(); }
                if (textheight - top - $(window).height() <= 100) {
                    $("#hidtxtPdnum").val(curnum + 1);
                    if (curnum >= 3) {
                        return;
                    }
                                                
                    $.ajax({
                        type: "get",
                        url: "ajax/getInfo.aspx?ppage=" + curnum + "&acDate=" + (new Date().getTime()),
                        success: function(msg) {
                            var $boxes = $(msg);
                            $('#container').append($boxes).masonry('appended', $boxes, true);
                        },
                        error: function() {
                            alert("参数出错，刷新后重试");
                            return false;
                        }
                    });
                }
            });

如果是一个div内部的滚动怎么做？比如： <div id="div1" style="overflow-y:auto; overflow-x:hidden;height:500px;"> <div style="background-color:#ccc;">原有内容；；；；；；；；；</div> <footer> <div></div> </footer> </div> 当滚动条滚到底部，在<footer></footer>里显示“加载更多。。。”，并触发Ajax