瀑布流兼容移动端ZeptojQuery插件下拉刷新、上拉加载更多资源-CSDN文库

共12个文件

html：5个

js：4个

json：2个

4星 · 超过85%的资源需积分: 50 188 浏览量 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

jquery.min.js 82KB

zepto.min.js 24KB

load-bottom.html 4KB

multiple-load.html 5KB

<!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>  <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'

评论收藏

内容反馈