相信大家经常遇到瀑布流效果,那么用js怎么实现呢?

浏览:432    发布时间:2019-07-29 21:06:32

相信大家经常遇到瀑布流效果,那么用js怎么实现呢?

看看小编为您分享的。 


别忘了引用jquery类库


代码如下: 

$(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为内容可视区域的高度。


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


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