jquery 瀑布流原理页面到达底部加载数据的方法

最新推荐文章于 2021-04-09 11:25:20 发布

一航jason

最新推荐文章于 2021-04-09 11:25:20 发布

阅读量3k

点赞数

分类专栏： html5/css3/JavaScript 前端开发文章标签： javascript

html5/css3/JavaScript 前端开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

   <script type="text/javascript">
                function insertcode() {
                    var $body = $("body");
                    $body.append('<div style=\" height:1000px; font-size:24px;\">新增项目</div>')
                    $("#page_tag_load").hide();
                }
                $(document).ready(function () {

                    $(window).scroll(function () {
                        var $body = $("body");
                        var $html = "";
                        $html += "<br/>" + ($(window).height() + $(window).scrollTop());
                        $html += "<br/>window.height: " + $(window).height();
                        $html += "<br/>body.height: " + $body.height();
                        $html += "<br/>window.scrollTop: " + $(window).scrollTop();
                        $("#page_tag_bottom").html($html);

                  /*关键 如果 屏幕高度加上 向下滚动距离等于 body 文档高度 或者 大于*/
                        if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
                            $("#page_tag_load").show();
                            //setTimeout(insertcode, 1000);/*IE 不支持*/
                            insertcode();
                        }
                    });
                });
    </script>
</head>

<body>
    <div style=" height:1000px; font-size:24px;">新增项目</div>
    <div id="page_tag_bottom" style=" width:100%; position:fixed; top:0px; background-color:#cccccc;height:100px;"></div>
    <div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加载中...</div>
</body>

</html>