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); } }
这里要说明一个问题，就是当内容高度很小小于屏幕高度是时候不需要上拉刷新，所以我们直接去掉就好了。
复制以上代码就可以实现下拉刷新和上拉加载的模拟效果