var hasNext=true;//触发开关,防止多次调用事件
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
var nDivHight = $('#main').height();
$('#main').scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
if(nScrollTop + paddingBottom + paddingTop + nDivHight + 100 >= nScrollHight && hasNext==true){
hasNext = false;
$.ajax({
url:'/blog/'+page++,
data:'',
type:'post',
dataType:'text',
success:function(result){
if(result.code){
$('#article-list').append(result);
hasNext = true;
}else{
hasNext = false;
$('#article-list').append('<div class="alert with-icon"><i class="icon-info-sign"></i><h3 class="content">'+ result.message +'</h3></div>');
}
}
})
}
});

div流加载的更多相关文章

  1. WAP用户评论简单实现瀑布流加载

    wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式. 第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容 <ul class=&qu ...

  2. js图片加载效果(延迟加载+瀑布流加载)

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  3. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

  4. css3多列布局瀑布流加载样式

    看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...

  5. CAD从二进流加载数据(com接口VB语言)

    主要用到函数说明: MxDrawXCustomFunction::ReadBinStreamEx 从二进流加载数据,详细说明如下: 参数 说明 IMxDrawBinStream* pBinStream ...

  6. div动态加载页面

    div动态加载页面 /* /// method 1 var url="<%=basePath%>/qne.do?p=pessegerCountSet"; $.post( ...

  7. layui流加载+h5自带模板

    @{ ViewBag.Title = "服务列表"; Layout = "~/Areas/hahaha/Views/Shared/_Head.cshtml"; ...

  8. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  9. Javascript - LayUI库的流加载

    LayUI库的流加载 用的LayUI-v2.2.45,将整个包解压缩后添加到项目,引入两个文件即可,不需要引入Jquery,此库自带: <link href="../js/layui- ...

随机推荐

  1. vue2.0表单事件的绑定

    v-model 1.input type="text" <template> <div id="app"> <label for= ...

  2. sql server 各种等待类型-转

    等待的类型 资源等待 当某个工作线程请求访问某个不可用的资源(因为该资源正在由其他某个工作线程使用,或者该资源尚不可用)时,便会发生资源等待.资源等待的示例包括锁等待.闩锁等待.网络等待以及磁盘 I/ ...

  3. async await promise

    async 异步函数,以后可能会用得很广. 1.箭头函数: 没有{ }时不写return 也有返回值 2.Promise : 异步神器,很多异步api都是基于Promise 3.new Promise ...

  4. Tableau的简单数据可视化操作

    本文将讲解Tableau的基本使用和简单的数据分析. 在Tableau首页,我们可以看到有多种连接方式:文本文件.Excel.JSON文件.数据库等. 1.连接文本文件 点击"连接" ...

  5. zabbix借助onealert实现微信报警

    官网:http://wiki.110monitor.com/integration/zabbix-manual.html) Zabbix安装包部署方式 1)下载agent软件包 请在Zabbix服务器 ...

  6. 解决 react-router / react-router-dom v4 history不能访问的问题

    今天我把react-router 升级了一下, 在使用react-router-dom 是,子组件使用this.props.history 找不到了,看看官方文档,找了半天也没找到,因为我是在异步执行 ...

  7. 一个简单JDK动态代理的实例

    动态代理的步骤: 创建一个实现了InvocationHandler接口的类,必须重写接口里的invoke()方法. 创建被代理的类和接口 通过Proxy的静态方法 newProxyInsatance( ...

  8. Yarn篇--搭建yran集群

    一.前述 有了上次hadoop集群的搭建,搭建yarn就简单多了.废话不多说,直接来 二.规划 三.配置如下 yarn-site.xml配置 <property>        <n ...

  9. .net随笔--不好归类的

    1..cs .Designer.cs .resx三种文件 cs是类文件,不介绍了.Designer.cs是visual studio对cs类文件的自动生成代码的一种补充,在编辑器里用视图的方式对win ...

  10. promise间隔时间添加dom

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...