jquery实现加载更多效果
情况是当滑动条滑动到最底部的时候,数据显示出一部分的更多
思路:获取到浏览器屏幕的高度client,文档的高度h和滑动距离顶部的距离scroll,当h<=client+scroll的时候就是滑动条到了底部的时候了,
判断好什么时候到了底部的时候,调取ajax获取到相对应的数据;
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin:0px;padding:0px;}
.content{width:500px;height:100%;border:1px solid red;margin:10px auto 0px;}
</style>
</head>
<body>
<div class="content"></div>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
//一开始显示数据
//实际中应该是将分页的效果做成加载更多的效果 但是调取数据的原理 是一样的 就是显示数据的效果不一样
ajax();
$(document).scroll(function(){
//滚动条滑动的时候获取滚动条距离顶部的距离
var scroll=$(document).scrollTop();
//屏幕的高度
var client=$(window).height();
var h=$(document).height();
var flag=true;
if (h<=scroll+client) { // 到达底部时,加载新内容
if(flag==false){
return;
}
ajax();
} });
function ajax(){
$.ajax({
url:'https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word=新闻',
type:'GET',
dataType:'jsonp',
success:function(data){
flag=false;
setTimeout(function(){//只是模拟一下需要有个时间过程表示正在调取数据
for(var i=0;i<data.result.length;i++){
var result=data.result[i];
var odiv='<span style="font-size:35px;margin:10px;line-height:50px;">'+result.word+'</span></br>'+
'<span style="font-size:35px;margin:10px;line-height:50px;">'+result.word+'</span></br>';
$(".content").append(odiv);
}
},500); },
});
}; });
</script>
</body>
</html>
代码地址:https://github.com/GainLoss/load-more
因为加载更多的效果其实作用和分页是一样的 分页的地址:http://www.cnblogs.com/GainLoss/p/5810112.html
jquery实现加载更多效果的更多相关文章
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- jQuery自动加载更多程序
1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...
- JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
- jQuery自动加载更多程序(转)
jQuery自动加载更多程序 1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据 ...
- apiCloud实现加载更多效果,基本完美~
apiCloud实现加载更多效果 1.接口支持,加入参数page. $page = $this->_request('page','trim','1'); $pagesize = 10; // ...
- ajax 下拉加载更多效果
1.生成HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jQuery实现加载中效果,防止重复提交
//导出表格加载中的提示var dian=0;//控制'●'的个数var t=null;//停止时使用function id_loadspot(loadspotSpan,loadingDiv,expo ...
- 基于jQuery实现点击列表加载更多效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- jQuery 显示加载更多(节流) 实现预加载
(function () { var showMoreNChildren = function ($children, n) { //显示某jquery元素下的前n个隐藏的子元素 var $hidde ...
随机推荐
- NPOI导出EXCEL部分样式不起作用
在使用NPOI导出excel的时候,设置cell样式,数据量多余6条之后,在后面几条数据没有样式(边框,对其,换行等). 原因是设置CellStyle的时候把CreateCellStyle放在循环列集 ...
- Unity MMORPG游戏优化经验分享
https://mp.weixin.qq.com/s/thGF2WVUkIQYQDrz5DISxA 今天由Unity技术支持工程师高岩,根据实际的技术支持工作经验积累,分享如何对Unity MMORP ...
- PCB生产企业自动化立体仓库/智能仓库库系统WMS/WCS解决方案
PCB生产企业自动化立体仓库/智能仓库库系统WMS/WCS解决方案 自动化立体仓库智能仓储系统WMS/WCS重要性调查 调查1(物流成本占总生产成本比例数据)1979年英国的第一次调查表明,在从原材料 ...
- ubuntu命令错误集
1.在ubuntu命令行使用rz从windows传输文件时出现乱码 解决方法:使用 rz -e 选项进行传输,一般小文件传输不用加 -e 选项,大文件传输需要.
- HDU1863-畅通工程
题目链接:点击打开链接 Problem Description 省政府"畅通工程"的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即 ...
- Codeforces Round #129 (Div. 2) C
Description The Little Elephant very much loves sums on intervals. This time he has a pair of intege ...
- Java实现快排+小坑+partition的两种思路
在做一道剑指Offer的题的时候,有道题涉及到快排的思路,一开始就很快根据以前的思路写出了代码,但似乎有些细节不太对劲,自己拿数据试了下果然.然后折腾了下并记录下一些小坑,还有总结下划分方法parti ...
- python3+Appium自动化04-Toast元素识别
什么是toast? 如下图,“再按一次退出程序”,这就是toast 如何定位toast元素? Appium1.6.3开始支持识别Toast内容,主要基于UiAutomator2 想定位toast元素, ...
- 【好书推荐】《剑指Offer》之软技能
俗话说,对于程序员来讲,每年都应该出去面试一下,看看自己的技术能力在外面处于什么水平.程序员在一个公司一个环境一个业务干得太久,很容易丧失学习的动力,获得的仅仅是从新手到熟手.当然,我相信在各行各业均 ...
- ThreadPoolExecutor线程池的keepAliveTime
keepAliveTime含义 看了很多文章觉得都不能把keepAliveTime的意思说的很明白,希望通过自己的理解把keepAliveTime说的明确一些 先引用一句我觉得相对说的比较明白的含义: ...