浏览器滚动到底部加载更多数据

列表页面加载更多数据的实现办法如下，根据个别情况，还需要考虑加载次数过多的逻辑处理。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>滚动加载更多</title>
        <style type="text/css">
            body,
            div {
                margin: 0;
                padding: 0;
            }
            
            body {
                width: 100%;
                background-color: #ccc;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                border: 1px solid gold;
            }
            
            .load_div {
                width: 400px;
                height: 300px;
                border: 1px solid red;
            }
            
            .load_div2 {
                width: 400px;
                height: 300px;
                border: 1px solid green;
            }
        </style>
    </head>

    <body>
        <div class="load_div"></div>
        <div class="load_div"></div>
        <div class="load_div"></div>
        <div class="load_div"></div>
        <div class="load_div"></div>
        <div class="load_div"></div>
        <div class="load_div"></div>
        <div class="load_div"></div>
        <div class="load_div"></div>
    </body>
    <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var totalHeight = $(document).height(); //整个文档高度
        var seeHeight = $(window).height(); //浏览器可视窗口高度
        var scrollTop = $(window).scrollTop(); //浏览器可视窗口顶端距离网页顶端的高度

        //添加滚动事件
        $(window).scroll(function() {
            scrollTop = $(window).scrollTop();
            totalHeight = $(document).height();
            console.log(scrollTop, seeHeight, totalHeight)
            //滚动条+可视高度+50，距离文档高度差50的时候就要加载数据了
            if(scrollTop + seeHeight + 50 > totalHeight) {
                var htmlText = '<div class="load_div2"></div><div class="load_div2"></div><div class="load_div2"></div>';
                $('body').append(htmlText);
            }
        })
    </script>
</html>

加载过于频繁的问题，可以参考另一篇文章事件节流来解决。