jq、js 滑到底部自动加载更多

利用jquery实现滑动到屏幕底部时自动异步加载数据功能，对于需要异步分页的页面比较友好，

解析：

    判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。

    scrollTop为滚动条在Y轴上的滚动距离。

    clientHeight为内容可视区域的高度。

    scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

    从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。（兼容不同的浏览器）。

下面是jq的控制页面滑动到底部的代码：

$(window).scroll(

function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) {
// 此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
alert("到底了，这里写逻辑");
}
});

案例：

<script>
//第一页自动由php遍历，第二页开始ajax请求
    var page = <?php echo $data['pages'] > 0 ? intval($data['pages']) : 0;?>;
    var pageSize = '<?php echo $data['pageSize'];?>';
    var nowCount = '<?php echo !empty($data['data']) ? count($data['data']) : 0;?>';
    var canPage = true;
    $(window).scroll(
        function () {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if (scrollTop + windowHeight == scrollHeight) {
                // 此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
                if (nowCount == pageSize && canPage) {
                    page += 1;
                    $.ajax({
                        url: '我的内心角落里藏着一个不可能的你',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            page: page,
                        },
                        success: function (res) {
                            var data = res.data;
                            if (data.length < pageSize) {
                                canPage = false;//判断是否可再次分页
                            }
                            if (data.length > 0) {
                                var html = '';
                                for (i = 0; i < data.length; i++) {
                                    html += '<li><a href="detail&id=' + data[i].id + '"><div class="gg-product_img"><img src="' + data[i].pimg + '"></div><div class="gg-product_text tlie">' + data[i].pname + '</div><div class="gg-pprice"><span class="fl cldb3652 sz14r">￥' + (data[i].pprice / 100) + '</span><span class="fr cldb3652 sz14r  glyphicon glyphicon-shopping-cart " style="margin-top:.06rem"></span><div class="clearfix"></div></div></a></li>';
                                }
                                $("#load").append(html)
                            }
                        },
                        error: function () {
                            alert('网络超时')
                        }
                    })
                }

                // console.log(data)
                // alert("暂无数据");
            }
        });
</script>