iscroll.js 下拉刷新和上拉加载
html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header id="header" class="blue">
</header>
<section id="section">
<div id="scroll">
<header id="upRefresh">
<span class="downSpan">下拉刷新</span>
</header>
<section id="scroll-box"><div class="item"><img src="img/1.jpg"></div>
<div class="item"><img src="img/2.jpg"></div>
<div class="item"><img src="img/3.jpg"></div>
<div class="item"><img src="img/4.jpg"></div>
<div class="item"><img src="img/5.jpg"></div>
<div class="item"><img src="img/6.jpg"></div>
<div class="item"><img src="img/10.jpg"></div>
<div class="item"><img src="img/9.jpg"></div>
<div class="item"><img src="img/8.jpg"></div>
<div class="item"><img src="img/7.jpg"></div>
</section>
<footer id="downRefresh">
<span class="upSpan">上拉加载</span>
</footer>
</div>
</section>
<footer id="footer" class="blue">
</footer>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
这里reset.css主要是为了清除浏览器的默认样式。可以看我上一篇博客里面有；
style.css里面主要是简单的样式，代码如下
#header{position: fixed;top: 0px;left: 0px;height: 58px;width: 100%;}
.blue{background-color:#17466f;}
#section{position: fixed;top: 58px;bottom: 36px;width: 100%;}
#scroll{width: 100%;}
.item{width: 44%;box-shadow: 0 0 5px 0px #666;}
#footer{position: fixed;bottom: 0px;left: 0px;height: 36px;width: 100%;}
#upRefresh,#downRefresh{height:36px;line-height:36px;width: 100%;text-align: center;}
最核心的是在js里面进行，代码如下
function waterFall(opations){
this.father = document.getElementById(opations.father);
this.liNum = 0;
this.childs = this.father.children;
this.liWidth = opations.childWidth || this.childs[0].offsetWidth;
this.fatherWidth = opations.fatherWidth || this.father.offsetWidth;
this.childNum = 0;
this.padding =0;
this.heightPdding =opations.heightPdding;
this.arrHeight = [];
this.minHeight = 0;
this.maxHeight = 0;
this.minIdx = 0;
this.init();
}
waterFall.prototype = {
init:function(){
this.mune();
for(var y = 0; y < this.liNum;y++){
this.childs[y].style.position = "absolute";
this.childs[y].style.width = this.liWidth +"px";
if(y < this.childNum){
this.childs[y].style.left = (this.liWidth*y+this.padding*(y+1))+"px";
this.childs[y].style.top = this.heightPdding+"px";
this.arrHeight.push(parseInt(this.childs[y].offsetHeight)+this.heightPdding*2)
}else{
var b = Math.floor(y/this.childNum);
this.minHeight = Math.min.apply(null,this.arrHeight);
this.minIdx = this.fountMin();
this.childs[y].style.left = (this.liWidth*this.minIdx+this.padding*(this.minIdx+1))+"px";
this.childs[y].style.top = this.minHeight +"px";
this.arrHeight[this.minIdx] += parseInt(this.childs[y].offsetHeight)+this.heightPdding;
}
}
this.maxHeight = Math.max.apply(null,this.arrHeight);
this.father.style.height = this.maxHeight+ "px";
this.father.style.position = "relative";
this.father.style.width = this.fatherWidth+ "px";
},
mune:function(){
this.childNum = Math.floor(this.fatherWidth/this.liWidth);
this.padding = parseInt(this.fatherWidth - this.liWidth*this.childNum)/(this.childNum+1);
this.liNum = this.childs.length;
},
fountMin:function(){
for(x in this.arrHeight){
if(this.minHeight == this.arrHeight[x]){
return parseInt(x);
}
}
},
}
/**/
window.onload = function(){
/**/
function _time_(){
var curTime = new Date();
$("#time_").text(curTime.getHours()+":"+(curTime.getMinutes())+":"+curTime.getSeconds())
$("#date_").text(curTime.getFullYear()+"/"+(curTime.getMonth()+1)+"/"+curTime.getDate())
}
_time_();
setInterval(function(){_time_()},1000)
/*以上为时间函数，与正文无关*/
var ref = function(){ //瀑布流
var aa = new waterFall({
father : "scroll-box",
heightPdding : 10,
})
}
ref();
/*以下为iScroll函数所必要*/
var pullDownEl = document.getElementById("upRefresh");
pullDownOffset = pullDownEl.offsetHeight;
var pullUpEl = document.getElementById("downRefresh");
pullUpOffset = pullUpEl.offsetHeight;
var myScroll = new iScroll("section",{
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loadIng')) {
pullDownEl.className = '';
pullDownEl.querySelector('.downSpan').innerHTML = '下拉刷新';
} else if (pullUpEl.className.match('loadIng')) {
pullUpEl.className = '';
pullUpEl.querySelector('.upSpan').innerHTML = '上拉加载';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.downSpan').innerHTML = '松手开始更新...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.downSpan').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.upSpan').innerHTML = '松手开始更新...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.upSpan').innerHTML = '上拉加载更多...';
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loadIng';
pullDownEl.querySelector('.downSpan').innerHTML = '加载中...';
pullDownAction(); // Execute custom function (ajax call?)
}
else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loadIng';
pullUpEl.querySelector('.upSpan').innerHTML = '加载中...';
pullUpAction();
}
}
});
function pullDownAction () { //此函数应该是ajax请求函数，自行模拟
setTimeout(function () {
var el, li, i;
el = document.getElementById('scroll-box');
for(i=0;i<4;i++){
li = document.createElement('div');
li.className = "item";
li.innerHTML = '<img src="img/'+(i+1)+'.jpg">'
el.insertBefore(li,el.childNodes[0]);
}
ref(); //刷新瀑布流
myScroll.refresh(); //刷新iScroll
}, 1000);
}
function pullUpAction () { //此函数应该是ajax请求函数，自行模拟
setTimeout(function () {
var el, li, i;
el = document.getElementById('scroll-box');
for(i=0;i<4;i++){
li = document.createElement('div');
li.className = "item";
li.innerHTML = '<img src="img/'+(i+1)+'.jpg">'
el.appendChild(li,el.childNodes[0]);
}
ref(); //刷新瀑布流
myScroll.refresh(); //刷新iScroll
}, 1000);
}
}
这里要说明一个问题，就是当内容高度很小小于屏幕高度是时候不需要上拉刷新，所以我们直接去掉就好了。
复制以上代码就可以实现下拉刷新和上拉加载的模拟效果
iscroll.js 下拉刷新和上拉加载的更多相关文章
- android--------自定义控件ListView实现下拉刷新和上拉加载
开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,为了方便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能. Android下拉刷新可以分为两种情况: 1.获取 ...
- H5下拉刷新和上拉加载实现原理浅析
前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...
- Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理
RecyclerView已经写过两篇文章了,分别是Android 5.X新特性之RecyclerView基本解析及无限复用 和 Android 5.X新特性之为RecyclerView添加Header ...
- IOS 开发下拉刷新和上拉加载更多
IOS 开发下拉刷新和上拉加载更多 简介 1.常用的下拉刷新的实现方式 (1)UIRefreshControl (2)EGOTTableViewrefresh (3)AH3DPullRefresh ( ...
- IOS UITableView下拉刷新和上拉加载功能的实现
在IOS开发中UITableView是非常常用的一个功能,而在使用UITableView的时候我们经常要用到下拉刷新和上拉加载的功能,今天花时间实现了简单的UITableView的下拉刷新和上拉加载功 ...
- Android 使用PullToRefresh实现下拉刷新和上拉加载(ExpandableListView)
PullToRefresh是一套实现非常好的下拉刷新库,它支持: 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多种常用的需要刷新的Vie ...
- 使用PullToRefresh实现下拉刷新和上拉加载
使用PullToRefresh实现下拉刷新和上拉加载 分类: Android2013-12-20 15:51 78158人阅读 评论(91) 收藏 举报 Android下拉刷新上拉加载PullToRe ...
- 下拉刷新和上拉加载 Swift
转载自:http://iyiming.me/blog/2015/07/05/custom-refresh-and-loading/ 关于下拉刷新和上拉加载,项目中一直使用MJRefresh(原先还用过 ...
- 安卓开发笔记——关于开源组件PullToRefresh实现下拉刷新和上拉加载（一分钟搞定，超级简单）
前言 以前在实现ListView下拉刷新和上拉加载数据的时候都是去继承原生的ListView重写它的一些方法,实现起来非常繁杂,需要我们自己去给ListView定制下拉刷新和上拉加载的布局文件,然后添 ...
随机推荐
- bitset用法总结
b.any() b中是否存在置为1的二进制位? b.none() b中不存在置为1的二进制位吗? b.count() b中置为1的二进制位的个数 b.size() b中二进制位的个数 b[pos] 访 ...
- Bzoj1426 收集邮票
Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 292 Solved: 232 Description 有n种不同的邮票,皮皮想收集所有种类的邮票.唯一 ...
- PHP之：序列化和反序列化-serialize()和unserialize()
撰写日期:2016-7-7 10:56:40 参考PHP在线手册(php.net):http://php.net/manual/zh/function.serialize.php 1.序列化 seri ...
- 在不损坏C盘的情况下为C盘扩容，适用于Win
2016年12月29日14:29:27 参考原文:http://jingyan.baidu.com/article/90808022a6c6b7fd91c80fc8.html 在不损坏磁盘的情况下给某 ...
- Nginx实现多域名证书HTTPS
目前公司有2个域名,其中这次涉及到3个子域名需要更改为HTTPS传输,分别为: passport.abc.com www.test.com admin.test.com 那么就涉及到购买ssl证书的问 ...
- asp.net MVC4 异步文件上传
1.下载ajaxfileupload.js 2.在控制器内创建如下方法 //文件上传 public ActionResult uploadFile(HttpPostedFileBase file) { ...
- AssetBundle
AssetBundle是Unity推荐的一种资源打包方式,与不使用AssetBundle相比,它有如下优点: 1.AssetBundle是经过LZMA压缩过的,所以体积更小. 2.可以将AssetBu ...
- 做为一个前端工程师，是往node方面转，还是往HTML5方面转
文章背景:问题本身来自于知乎,但是我感觉这个问题很典型,有必要把问题在整理一下,重新分享出来. 当看到这个问题之前,我也碰到过很多有同样疑惑的同学,他们都有一个共同的疑问该学php还是nodejs,包 ...
- [Tomcat] Tomcat的classloader
定义 同其他服务器应用一样,tomcat安装了各种classloader(classes that implement java.lang.ClassLoader) Bootstrap | Syste ...
- 一些关于angularJS的自己学习和开发过程中遇到的问题及解决办法
这篇文章也许会不定时更新,主要记录这段时间内自己遇到的angularjs学习开发的一些问题的解决办法.本文以摘抄为主,主要目的还是将自己遇到的困惑在各个地方查到的解决办法的汇总,给自己留个备忘吧. 1 ...