[JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件

本人小菜鸟一仅仅。为了自我学习和交流PHP（jquery,linux,lamp,shell,javascript,server）等一系列的知识，小菜鸟创建了一个群。希望光临本博客的人能够进来交流。寻求共同发展。

搭建平台。

本人博客也有很多的技术文档。希望能够为你提供一些帮助。

QQ群：   191848169               QQ：450225664

页面滚动动态载入数据,页面下拉自己主动载入内容

相信非常多人都见过瀑布流图片布局，那些图片是动态载入出来的，效果非常好，对server的压力相对来说也小了非常多

有手机的相信都见过这种效果：进入qq空间。向下拉动空间，究竟部时，会动态载入剩余的说说或者是日志

今天我们就来看看他们的实现思路和js控制动态载入的代码

以下的代码主要是控制滚动栏下拉时的载入事件的

在以下代码说明出。写上你的操作就可以。不管是载入图片还是载入记录数据  都能够  

别忘了引用jquery类库

[JavaScript] 纯文本查看 复制代码

    $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {

      //此处是滚动栏究竟部时候触发的事件，在这里写要载入的数据，或者是拉动滚动栏的操作

//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage', page + 1);

        }
    });

解析：

推断滚动栏究竟部，须要用到DOM的三个属性值。即scrollTop、clientHeight、scrollHeight。

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

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

相关阅读:
联考20200725 T1 String
联考20200723 T1 数
联考20200722 T3 积木
联考20200722 T2 ACT4！无限回转！
联考20200722 T1 集合划分
联考20200721 T2 s2mple
联考20200721 T1 s1mple
联考20200719 T2 寻找规律
联考20200719 T1 合并奶牛
联考20200718 T2 树论