页面滚动条滑动至底部加载信息

$(window).scroll(function(){
 
  var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
  var scrollHeight = $(document).height();   //当前页面的总高度
  var clientHeight = $(this).height();    //当前可视的页面高度
  // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
  if(scrollTop + clientHeight >= scrollHeight){   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部 
      var html=‘‘;//需要添加的数据信息
      
      $(‘.masonry‘).append(html);//添加到哪里去    
  }
});

原文地址:https://www.cnblogs.com/zhangyong0908/p/9376493.html

时间: 2024-08-01 09:30:58

页面滚动条滑动至底部加载信息的相关文章

手机端页面滑动到底部加载信息

//滚动加载function scroll_load(){    var scrollBottom; //网页正文全文高-滚动条距离顶部的高度        $(document).scroll(function(){//滚动事件          scrollBottom = document.body.scrollHeight - document.body.scrollTop;          if(scrollBottom == document.body.clientHeight||

封装的图片预加载,数据加载到浏览器底部加载数据

html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <style> *{ padding:0; margin:0

Django+ajax实现页面底部加载

Django+ajax实现页面底部加载 需求:展示图片,当滚动条拖到页面底部时加载一部分图画. 问题:photo的展示使用的是django的QuerySet,对于ajax如何加载非常头痛,还专门补了一下js. 解决思路:用的取巧的办法,把photo先分页,然后ajax的load方法加载下一个页面的photo部分到当前页面来. 分页 第一步是把photo的QuerySet分页展示,我这里直接用127.0.0.1:8000/x/的url,所以在urls.py里这样写 url(r'^(?P<page>

jQuery实现当拉动滚动条到底部加载数据

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实现当拉动滚动条到底部加载数据</title><script type="text/javascript&qu

yii2 如何在页面底部加载css和js

作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 正所谓命由己造,相由心生,那么我们的问题又是怎么抛出来的喃? 这个问题也算是个比较久远但是经常会有人要问到的问题.究其原因, 一来实际开发中不可避免,二来也就是刚接触yii的小伙伴喜欢揪着不放.那 为啥了解过这个问题的人就不纠结了喃?外星人:楼主你si不si撒,人家都

基于JQuery实现滚动到页面底端时自动加载更多信息

基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if($(document).height() <= totalheight){ if(stop==true){ stop=false; $.post("ajax.

HTML5手机端手指滑动上拉加载代码

在线预览   源码下载 HTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果,适用于手机端页面开发.该特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

Android下拉刷新库,利用viewdraghelper实现,集成了下拉刷新,底部加载更多,数据初始加载显示loading等功能

项目Github地址:https://github.com/sddyljsx/pulltorefresh Android下拉刷新库,利用viewdraghelper实现. 集成了下拉刷新,底部加载更多,以及刚进入加载数据的loadview.包括了listview与gridview的改写. 效果1: 效果2: 效果3: 效果4: 效果5: 使用说明: imageList=(ListView)findViewById(R.id.image_list); imageAdapter=new ImageA

移动设备的HTML页面中图片实现滚动加载

如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时,要把页面加载完毕,可能就需要10s,20s甚至更多,严重影响用户的体验.针对这样的问题,让页面中的图片滚动加载(图片出现在显示器屏幕上时再加载图片)显得非常重要!这样也可以有效地节省我们服务器的带宽和解决请求大并发的问题. 1.效果图.     这是加载过程中的图片菊花显示