div流加载
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流加载的更多相关文章
- WAP用户评论简单实现瀑布流加载
wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式. 第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容 <ul class=&qu ...
- js图片加载效果(延迟加载+瀑布流加载)
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- CAD从二进流加载数据(com接口VB语言)
主要用到函数说明: MxDrawXCustomFunction::ReadBinStreamEx 从二进流加载数据,详细说明如下: 参数 说明 IMxDrawBinStream* pBinStream ...
- div动态加载页面
div动态加载页面 /* /// method 1 var url="<%=basePath%>/qne.do?p=pessegerCountSet"; $.post( ...
- layui流加载+h5自带模板
@{ ViewBag.Title = "服务列表"; Layout = "~/Areas/hahaha/Views/Shared/_Head.cshtml"; ...
- ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项
首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...
- Javascript - LayUI库的流加载
LayUI库的流加载 用的LayUI-v2.2.45,将整个包解压缩后添加到项目,引入两个文件即可,不需要引入Jquery,此库自带: <link href="../js/layui- ...
随机推荐
- 微信小程序入门指南
本文同步发布在 https://www.cssge.com 因为下个项目需要用微信小程序来开发,所以就找了小程序开发文档来研究.下面记录一下微信小程序的主要开发流程和语法. 账号注册 开发小程序的第一 ...
- Hyperledger Fabric 1.0 从零开始(十二)——fabric-sdk-java应用【补充】
在 Hyperledger Fabric 1.0 从零开始(十二)--fabric-sdk-java应用 中我已经把官方sdk具体改良办法,即使用办法发出来了,所有的类及文件都是完整的,在文章的结尾也 ...
- ReSharper 全教程
Resharper系列 更多关于Resharper的介绍 参考我之前的文章: Resharper 详细教程 提升ReSharper和Visual Studio的性能 Visual Studio中使用R ...
- js 移动端上拉加载下一页通用方案
取页面三种高度 //取进度条到底部距离 var getScrollTop = function () { var scrollTop = 0; if (document.documentElement ...
- 微信【跳一跳】 opencv视觉识别 + 物理外挂
视频连接:http://v.youku.com/v_show/id_XMzMyNDQxNTA0OA==.html?spm=a2h3j.8428770.3416059.1 初入门C++ 与 opencv ...
- vi/vim 如何添加和删除多行注释
1.进入vi/vim编辑器,按CTRL+V进入可视化模式(VISUAL BLOCK). 2.移动光标上移或者下移,选中多行的开头. 3.选择完毕后,按大写的I键,此时下方会提示进入"inse ...
- assert断言
https://www.cnblogs.com/ggzss/archive/2011/08/18/2145017.html assert是一个宏定义,其作用是如果它的条件返回错误,则终止程序执行,原型 ...
- Linux(常用命令) 中常用的压缩丶解压缩格式命令和参数详解
Linux中常用的压缩格式后缀名有:①.zip ②.gz ③.bz2 ④.tar.gz ⑤.tar.bz2 ①.zip后缀名格式 1.压缩 语法: ①zip 压缩文件名 源文件 (压缩文件) ...
- bzoj 2303: [Apio2011]方格染色
传送门 Description Sam和他的妹妹Sara有一个包含n × m个方格的表格.她们想要将其的每个方格都染成红色或蓝色.出于个人喜好,他们想要表格中每个2 × 2的方形区域都包含奇数个(1 ...
- Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861B Which floor?【枚举,暴力】
B. Which floor? time limit per test:1 second memory limit per test:256 megabytes input:standard inpu ...