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. springmvc注入类 NoUniqueBeanDefinitionException: No qualifying bean of type [] is defined: expected single错误

    在springmvc中注入服务时用@Service 当有两个实现类时都标明@Service后则会出现异常: nested exception is org.springframework.beans. ...

  2. vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法

    如果页面A沿Y轴滚动一段距离,然后跳转到页面B: 在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置: 这样体验就很不好,所以我们要进行一些处理: 我的方法是:在路由守卫 ...

  3. CSS根据子元素个数不同定义样式

    近日面试,遇见了一个这样的问题,不会,便记下来. 问题:如何根据子元素个数的不同定义不同的样式? 代码:HTML <ul> <li>1</li> <li> ...

  4. XML Schema格式的"日期型数据”数据库存取

    对于XML Schema格式的"日期型数据"在数据库中存于datetime字段的时候,出现错误 mysql> select @@sql_mode; +------------ ...

  5. MYBATIS常用的sql事例

    今天整理了一下在项目中经常用到的mybatis的xml文件的sql语句: 读者:有sql基础. <?xml version="1.0" encoding="UTF- ...

  6. 软件161A 张慧敏

    一.PTA实验作业 题目1:7-11 单向链表3:编程实现:输入一个正整数 repeat (0<repeat<10),做 repeat 次下列运算:输入一个正整数 n(0<n< ...

  7. 【转】.NET IL实现对象深拷贝

    对于深拷贝,通常的方法是将对象进行序列化,然后再反序化成为另一个对象.例如在stackoverflow上有这样的解决办法:https://stackoverflow.com/questions/785 ...

  8. 我使用 Docker 部署 Celery 遇到的问题

    问题1 - Sending due task 本机测试时没有问题的,但是在线上 docker 中,任务一直显示 "Sending due task".超时的任务是 Django O ...

  9. CSS position: absolute、relative定位问题详解

    CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...

  10. 开发中使用UEditor编辑器的注意事项

    最近在一个刚结束的一个项目中使用到了UEditor编辑器,下面总结一下遇到的问题以及使用时需要注意的地方: 1. 使用UEditor插件需要先对其进行路径配置: 在ueditor.config.js文 ...