<!doctype html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<title>固定布局，加载顶部、底部</title>
<style>
*{
margin: 0;
padding:0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust:none;
}
html{
font-size:10px;
}
body{
background-color: #f5f5f5;
font-size: 1.2em;
}
.outer{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-direction:column;
-webkit-box-orient:vertical;
box-orient:vertical;
-webkit-flex-direction:column;
flex-direction:column;
}
.header{
position: relative;
height: 44px;
line-height: 44px;
border-bottom: 1px solid #ccc;
background-color: #eee;
}
.header h1{
text-align: center;
font-size: 2rem;
font-weight: normal;
}
.header .btn{
position: absolute;
right: 0;
top: 0;
width: 4em;
height: 100%;
text-align: center;
color: #06c;
font-size: 1.4rem;
background-color: #ccc;
}
.header .btn:active{
background-color: #aaa;
color: #fff;
}
.inner{
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background-color: #fff;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.inner .item{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align:center;
-webkit-box-align:center;
box-align:center;
-webkit-align-items:center;
align-items:center;
padding:3.125%;
border-bottom: 1px solid #ddd;
color: #333;
text-decoration: none;
}
.inner .item img{
display: block;
width: 40px;
height: 40px;
border:1px solid #ddd;
}
.inner .item h3{
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
max-height: 40px;
overflow: hidden;
line-height: 20px;
margin: 0 10px;
font-size: 1.2rem;
}
.inner .item .date{
display: block;
height: 20px;
line-height: 20px;
color: #999;
}
.opacity{
-webkit-animation: opacity 0.3s linear;
animation: opacity 0.3s linear;
}
@-webkit-keyframes opacity {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes opacity {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
</style>
<link rel="stylesheet" href="../dist/dropload.css">
</head>
<body>
<div class="outer">
<div class="header">
<h1>头部</h1>
<a href="javascript:;" class="btn lock">锁定</a>
<div class="footer" style="position:absolute;left:0;top:0;background-color:#fff;">
<a href=""></a>
<a href="#"></a>
</div>
</div>
<div class="inner">
<div class="lists">
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>1文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>2文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>3文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>4文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>5文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>6文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>7文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>8文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>9文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>10文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>11文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
<a class="item" href="#">
<img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
<h3>12文字描述文字描述文字描述文字描述文字描述</h3>
<span class="date">2014-14-14</span>
</a>
</div>
</div>
</div>
<!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
<script src="js/zepto.min.js"></script>
<script src="../dist/dropload.min.js"></script>
<script>
$(function(){
// 按钮操作
$('.header .btn').on('click',function(){
var $this = $(this);
if(!!$this.hasClass('lock')){
$this.attr('class','btn unlock');
$this.text('解锁');
// 锁定
dropload.lock();
$('.dropload-down').hide();
}else{
$this.attr('class','btn lock');
$this.text('锁定');
// 解锁
dropload.unlock();
$('.dropload-down').show();
}
});
// dropload
var dropload = $('.inner'
瀑布流兼容移动端ZeptojQuery插件下拉刷新、上拉加载更多
4星 · 超过85%的资源 需积分: 50 28 浏览量
2016-10-17
09:47:57
上传
评论 1
收藏 58KB RAR 举报 
移动端下拉刷新、上拉加载更多 ZeptojQuery插件.rar （12个子文件） 
移动端下拉刷新、上拉加载更多 ZeptojQuery插件 dropload-gh-pages dist 
dropload.js 10KB dropload.css 1KB dropload.min.js 4KB examples 
load-top-bottom.html 11KB json update.json 3KB more.json 4KB product-list.html 11KB index.html 8KB js jquery.min.js 82KB zepto.min.js 24KB load-bottom.html 4KB multiple-load.html 5KB资源评论
yanbing9122018-09-06非常好，谢谢
王火火2021-04-07不能用，举报了
qq_345570422018-04-25下载下来不可以用呀- fmyshine2017-01-20下载下来不可以用
