diff --git a/Changelog.md b/Changelog.md
index ac7141e..f470db3 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -1,3 +1,8 @@
+### 0.4.0(150927)
+
+* 增加参数scrollArea
+* 修复未滑动到底部就加载bug
+
 ### 0.3.0(150410)
 
 * 增加`lock()` 和`unlock()` API
diff --git a/README.md b/README.md
index d0ad5c4..0b33c15 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,10 @@
 
 ## 背景介绍
 
+### 0.4.0(150927)
+
+根据网友提供demo，修改至适用大部分普通列表网页，终于可以大规模使用啦！
+
 ### 0.3.0(150410)
 
 项目中通知列表有可编辑、删除等状态，需要锁定和解锁下拉刷新功能。
@@ -18,8 +22,11 @@
 
 ## 示例
 
+![扫一扫](examples/news-list.png)
+[普通列表DEMO](http://ximan.github.io/dropload/examples/news-list.html)
+
 ![扫一扫](examples/product-list.png)
-[DEMO链接](http://ximan.github.io/dropload/examples/product-list.html)
+[固定布局DEMO](http://ximan.github.io/dropload/examples/product-list.html)
 
 ## 依赖
 
@@ -27,24 +34,14 @@ Zepto 或者 jQuery
 
 ## 使用方法
 
+引用css和js
+
+    <link rel="stylesheet" href="../dist/dropload.min.css">
+    <script src="../dist/dropload.min.js"></script>
+
 ````
 $('.element').dropload({
-    loadUpFn : function(me){
-        $.ajax({
-            type: 'GET',
-            url: 'json/update.json',
-            dataType: 'json',
-            success: function(data){
-                alert(data);
-                // 代码执行后必须重置
-                me.resetload();
-            },
-            error: function(xhr, type){
-                alert('Ajax error!');
-                me.resetload();
-            }
-        });
-    },
+    scrollArea : window,
     loadDownFn : function(me){
         $.ajax({
             type: 'GET',
@@ -64,12 +61,13 @@ $('.element').dropload({
 });
 ````
 
-CSS样式请自行美化
+进阶用法详见上面[固定布局DEMO](http://ximan.github.io/dropload/examples/product-list.html)
 
 ## 参数列表
 
 |    参数     |     说明     |  默认值 |      可填值     |
 |------------|-------------|--------|----------------|
+| scrollArea | 滑动区域      | 绑定元素自身 | window |
 | domUp      | 上方DOM      | {<br/>domClass : 'dropload-up',<br/>domRefresh : '&lt;div class="dropload-refresh"&gt;↓下拉刷新&lt;/div&gt;',<br/>domUpdate  : '&lt;div class="dropload-update"&gt;↑释放更新&lt;/div&gt;',<br/>domLoad : '&lt;div class="dropload-load"&gt;○加载中...&lt;/div&gt;'<br/>} | 数组 |
 | domDown    | 下方DOM      | {<br/>domClass : 'dropload-down',<br/>domRefresh : '&lt;div class="dropload-refresh"&gt;↑上拉加载更多&lt;/div&gt;',<br/>domUpdate  : '&lt;div class="dropload-update"&gt;↓释放加载&lt;/div&gt;',<br/>domLoad : '&lt;div class="dropload-load"&gt;○加载中...&lt;/div&gt;'<br/>}  | 数组 |
 | distance   | 拉动距离      | 50 | 数字 |
@@ -86,9 +84,9 @@ CSS样式请自行美化
 
 ## 最新版本
 
-### 0.3.0(150410)
+### 0.4.0(150927)
 
-* 增加`lock()` 和`unlock()` API
-* 修复拉动加载时还可拉动bug
+* 增加参数scrollArea
+* 修复未滑动到底部就加载bug
 
 [所有更新日志](Changelog.md)
\ No newline at end of file
diff --git a/dist/dropload.css b/dist/dropload.css
new file mode 100644
index 0000000..9ea3158
--- /dev/null
+++ b/dist/dropload.css
@@ -0,0 +1,56 @@
+.dropload-up,.dropload-down{
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    -webkit-transform:translate3d(0,0,0);
+    transform:translate3d(0,0,0);
+}
+.dropload-refresh,.dropload-update,.dropload-load{
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    -webkit-transform:translate(-50%,0);
+    transform:translate(-50%,0);
+}
+.dropload-down .dropload-refresh,.dropload-down .dropload-update,.dropload-down .dropload-load{
+    top: 0;
+    bottom: auto;
+}
+.dropload-load .loading{
+    display: inline-block;
+    height: 15px;
+    width: 15px;
+    border-radius: 100%;
+    margin: 6px;
+    border: 2px solid #666;
+    border-bottom-color: transparent;
+    vertical-align: middle;
+    -webkit-animation: rotate 0.75s linear infinite;
+    animation: rotate 0.75s linear infinite;
+}
+@-webkit-keyframes rotate {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+    50% {
+        -webkit-transform: rotate(180deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    50% {
+        transform: rotate(180deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file
diff --git a/dist/dropload.js b/dist/dropload.js
index b14f71f..bfab085 100644
--- a/dist/dropload.js
+++ b/dist/dropload.js
@@ -1,11 +1,13 @@
 /**
  * dropload
  * 西门
- * 0.3.0(150410)
+ * 0.4.0(150927)
  */
 
 ;(function($){
     'use strict';
+    var $win = $(window);
+    var $doc = $(document);
     $.fn.dropload = function(options){
         return new MyDropLoad(this, options);
     };
@@ -22,23 +24,31 @@
     MyDropLoad.prototype.init = function(options){
         var me = this;
         me.opts = $.extend({}, {
+            scrollArea : me.$element,                                            // 滑动区域
             domUp : {                                                            // 上方DOM
                 domClass   : 'dropload-up',
                 domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
                 domUpdate  : '<div class="dropload-update">↑释放更新</div>',
-                domLoad    : '<div class="dropload-load">○加载中...</div>'
+                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
             },
             domDown : {                                                          // 下方DOM
                 domClass   : 'dropload-down',
                 domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
                 domUpdate  : '<div class="dropload-update">↓释放加载</div>',
-                domLoad    : '<div class="dropload-load">○加载中...</div>'
+                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
             },
             distance : 50,                                                       // 拉动距离
             loadUpFn : '',                                                       // 上方function
             loadDownFn : ''                                                      // 下方function
         }, options);
 
+        // 判断滚动区域
+        if(me.opts.scrollArea == window){
+            me.$scrollArea = $win;
+        }else{
+            me.$scrollArea = me.opts.scrollArea;
+        }
+
         // 绑定触摸
         me.$element.on('touchstart',function(e){
             if(!me.loading && !me.isLock){
@@ -69,9 +79,15 @@
     // touchstart
     function fnTouchstart(e, me){
         me._startY = e.touches[0].pageY;
-        me._loadHeight = me.$element.height();
-        me._childrenHeight = me.$element.children().height();
-        me._scrollTop = me.$element.scrollTop();
+        // 判断滚动区域
+        if(me.opts.scrollArea == window){
+            me._meHeight = $win.height();
+            me._childrenHeight = $doc.height();
+        }else{
+            me._meHeight = me.$element.height();
+            me._childrenHeight = me.$element.children().height();
+        }
+        me._scrollTop = me.$scrollArea.scrollTop();
     }
 
     // touchmove
@@ -101,6 +117,7 @@
             // 下拉
             if(_absMoveY <= me.opts.distance){
                 me._offsetY = _absMoveY;
+                // 待解决：move时会不断清空、增加dom，有可能影响性能，下同
                 me.$domUp.html('').append(me.opts.domUp.domRefresh);
             // 指定距离 < 下拉距离 < 指定距离*2
             }else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){
@@ -115,7 +132,7 @@
         }
 
         // 加载下方
-        if(me.opts.loadDownFn != '' && me._childrenHeight <= (me._loadHeight+me._scrollTop) && me.direction == 'up'){
+        if(me.opts.loadDownFn != '' && me._childrenHeight <= (me._meHeight+me._scrollTop) && me.direction == 'up'){
             e.preventDefault();
             if(!me.insertDOM){
                 me.$element.append('<div class="'+me.opts.domDown.domClass+'"></div>');
@@ -139,7 +156,7 @@
             }
 
             me.$domDown.css({'height': me._offsetY});
-            me.$element.scrollTop(me._offsetY+me._scrollTop);
+            me.$scrollArea.scrollTop(me._offsetY+me._scrollTop);
         }
     }
 
diff --git a/dist/dropload.min.css b/dist/dropload.min.css
new file mode 100644
index 0000000..9e03306
--- /dev/null
+++ b/dist/dropload.min.css
@@ -0,0 +1 @@
+.dropload-up,.dropload-down{position:relative;height:0;overflow:hidden;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.dropload-refresh,.dropload-update,.dropload-load{position:absolute;left:50%;bottom:0;width:100%;height:50px;line-height:50px;text-align:center;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.dropload-down .dropload-refresh,.dropload-down .dropload-update,.dropload-down .dropload-load{top:0;bottom:auto}.dropload-load .loading{display:inline-block;height:15px;width:15px;border-radius:100%;margin:6px;border:2px solid #666;border-bottom-color:transparent;vertical-align:middle;-webkit-animation:rotate .75s linear infinite;animation:rotate .75s linear infinite}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
\ No newline at end of file
diff --git a/dist/dropload.min.js b/dist/dropload.min.js
index ca2e681..a4211ba 100644
--- a/dist/dropload.min.js
+++ b/dist/dropload.min.js
@@ -1,6 +1,6 @@
 /**
  * dropload
  * 西门
- * 0.3.0(150410)
+ * 0.4.0(150927)
  */
-!function(a){"use strict";function c(a){a.touches||(a.touches=a.originalEvent.touches)}function d(a,b){b._startY=a.touches[0].pageY,b._loadHeight=b.$element.height(),b._childrenHeight=b.$element.children().height(),b._scrollTop=b.$element.scrollTop()}function e(b,c){c._curY=b.touches[0].pageY,c._moveY=c._curY-c._startY,c._moveY>0?c.direction="down":c._moveY<0&&(c.direction="up");var d=Math.abs(c._moveY);""!=c.opts.loadUpFn&&c._scrollTop<=0&&"down"==c.direction&&(b.preventDefault(),c.insertDOM||(c.$element.prepend('<div class="'+c.opts.domUp.domClass+'"></div>'),c.insertDOM=!0),c.$domUp=a("."+c.opts.domUp.domClass),h(c.$domUp,0),d<=c.opts.distance?(c._offsetY=d,c.$domUp.html("").append(c.opts.domUp.domRefresh)):d>c.opts.distance&&d<=2*c.opts.distance?(c._offsetY=c.opts.distance+.5*(d-c.opts.distance),c.$domUp.html("").append(c.opts.domUp.domUpdate)):c._offsetY=c.opts.distance+.5*c.opts.distance+.2*(d-2*c.opts.distance),c.$domUp.css({height:c._offsetY})),""!=c.opts.loadDownFn&&c._childrenHeight<=c._loadHeight+c._scrollTop&&"up"==c.direction&&(b.preventDefault(),c.insertDOM||(c.$element.append('<div class="'+c.opts.domDown.domClass+'"></div>'),c.insertDOM=!0),c.$domDown=a("."+c.opts.domDown.domClass),h(c.$domDown,0),d<=c.opts.distance?(c._offsetY=d,c.$domDown.html("").append(c.opts.domDown.domRefresh)):d>c.opts.distance&&d<=2*c.opts.distance?(c._offsetY=c.opts.distance+.5*(d-c.opts.distance),c.$domDown.html("").append(c.opts.domDown.domUpdate)):c._offsetY=c.opts.distance+.5*c.opts.distance+.2*(d-2*c.opts.distance),c.$domDown.css({height:c._offsetY}),c.$element.scrollTop(c._offsetY+c._scrollTop))}function f(b){var c=Math.abs(b._moveY);b.insertDOM&&("down"==b.direction?(b.$domResult=b.$domUp,b.domLoad=b.opts.domUp.domLoad):"up"==b.direction&&(b.$domResult=b.$domDown,b.domLoad=b.opts.domDown.domLoad),h(b.$domResult,300),c>b.opts.distance?(b.$domResult.css({height:b.$domResult.children().height()}),b.$domResult.html("").append(b.domLoad),g(b)):b.$domResult.css({height:"0"}).on("webkitTransitionEnd",function(){b.insertDOM=!1,a(this).remove()}),b._moveY=0)}function g(a){a.loading=!0,""!=a.opts.loadUpFn&&"down"==a.direction?a.opts.loadUpFn(a):""!=a.opts.loadDownFn&&"up"==a.direction&&a.opts.loadDownFn(a)}function h(a,b){a.css({"-webkit-transition":"all "+b+"ms",transition:"all "+b+"ms"})}a.fn.dropload=function(a){return new b(this,a)};var b=function(b,c){var d=this;d.$element=a(b),d.insertDOM=!1,d.loading=!1,d.isLock=!1,d.init(c)};b.prototype.init=function(b){var g=this;g.opts=a.extend({},{domUp:{domClass:"dropload-up",domRefresh:'<div class="dropload-refresh">↓下拉刷新</div>',domUpdate:'<div class="dropload-update">↑释放更新</div>',domLoad:'<div class="dropload-load">○加载中...</div>'},domDown:{domClass:"dropload-down",domRefresh:'<div class="dropload-refresh">↑上拉加载更多</div>',domUpdate:'<div class="dropload-update">↓释放加载</div>',domLoad:'<div class="dropload-load">○加载中...</div>'},distance:50,loadUpFn:"",loadDownFn:""},b),g.$element.on("touchstart",function(a){g.loading||g.isLock||(c(a),d(a,g))}),g.$element.on("touchmove",function(a){g.loading||g.isLock||(c(a,g),e(a,g))}),g.$element.on("touchend",function(){g.loading||g.isLock||f(g)})},b.prototype.lock=function(){var a=this;a.isLock=!0},b.prototype.unlock=function(){var a=this;a.isLock=!1},b.prototype.resetload=function(){var b=this;b.$domResult&&b.$domResult.css({height:"0"}).on("webkitTransitionEnd",function(){b.loading=!1,b.insertDOM=!1,a(this).remove()})}}(window.Zepto||window.jQuery);
\ No newline at end of file
+!function(a){"use strict";function e(a){a.touches||(a.touches=a.originalEvent.touches)}function f(a,d){d._startY=a.touches[0].pageY,d.opts.scrollArea==window?(d._meHeight=b.height(),d._childrenHeight=c.height()):(d._meHeight=d.$element.height(),d._childrenHeight=d.$element.children().height()),d._scrollTop=d.$scrollArea.scrollTop()}function g(b,c){c._curY=b.touches[0].pageY,c._moveY=c._curY-c._startY,c._moveY>0?c.direction="down":c._moveY<0&&(c.direction="up");var d=Math.abs(c._moveY);""!=c.opts.loadUpFn&&c._scrollTop<=0&&"down"==c.direction&&(b.preventDefault(),c.insertDOM||(c.$element.prepend('<div class="'+c.opts.domUp.domClass+'"></div>'),c.insertDOM=!0),c.$domUp=a("."+c.opts.domUp.domClass),j(c.$domUp,0),d<=c.opts.distance?(c._offsetY=d,c.$domUp.html("").append(c.opts.domUp.domRefresh)):d>c.opts.distance&&d<=2*c.opts.distance?(c._offsetY=c.opts.distance+.5*(d-c.opts.distance),c.$domUp.html("").append(c.opts.domUp.domUpdate)):c._offsetY=c.opts.distance+.5*c.opts.distance+.2*(d-2*c.opts.distance),c.$domUp.css({height:c._offsetY})),""!=c.opts.loadDownFn&&c._childrenHeight<=c._meHeight+c._scrollTop&&"up"==c.direction&&(b.preventDefault(),c.insertDOM||(c.$element.append('<div class="'+c.opts.domDown.domClass+'"></div>'),c.insertDOM=!0),c.$domDown=a("."+c.opts.domDown.domClass),j(c.$domDown,0),d<=c.opts.distance?(c._offsetY=d,c.$domDown.html("").append(c.opts.domDown.domRefresh)):d>c.opts.distance&&d<=2*c.opts.distance?(c._offsetY=c.opts.distance+.5*(d-c.opts.distance),c.$domDown.html("").append(c.opts.domDown.domUpdate)):c._offsetY=c.opts.distance+.5*c.opts.distance+.2*(d-2*c.opts.distance),c.$domDown.css({height:c._offsetY}),c.$scrollArea.scrollTop(c._offsetY+c._scrollTop))}function h(b){var c=Math.abs(b._moveY);b.insertDOM&&("down"==b.direction?(b.$domResult=b.$domUp,b.domLoad=b.opts.domUp.domLoad):"up"==b.direction&&(b.$domResult=b.$domDown,b.domLoad=b.opts.domDown.domLoad),j(b.$domResult,300),c>b.opts.distance?(b.$domResult.css({height:b.$domResult.children().height()}),b.$domResult.html("").append(b.domLoad),i(b)):b.$domResult.css({height:"0"}).on("webkitTransitionEnd",function(){b.insertDOM=!1,a(this).remove()}),b._moveY=0)}function i(a){a.loading=!0,""!=a.opts.loadUpFn&&"down"==a.direction?a.opts.loadUpFn(a):""!=a.opts.loadDownFn&&"up"==a.direction&&a.opts.loadDownFn(a)}function j(a,b){a.css({"-webkit-transition":"all "+b+"ms",transition:"all "+b+"ms"})}var d,b=a(window),c=a(document);a.fn.dropload=function(a){return new d(this,a)},d=function(b,c){var d=this;d.$element=a(b),d.insertDOM=!1,d.loading=!1,d.isLock=!1,d.init(c)},d.prototype.init=function(c){var d=this;d.opts=a.extend({},{scrollArea:d.$element,domUp:{domClass:"dropload-up",domRefresh:'<div class="dropload-refresh">↓下拉刷新</div>',domUpdate:'<div class="dropload-update">↑释放更新</div>',domLoad:'<div class="dropload-load"><span class="loading"></span>加载中...</div>'},domDown:{domClass:"dropload-down",domRefresh:'<div class="dropload-refresh">↑上拉加载更多</div>',domUpdate:'<div class="dropload-update">↓释放加载</div>',domLoad:'<div class="dropload-load"><span class="loading"></span>加载中...</div>'},distance:50,loadUpFn:"",loadDownFn:""},c),d.$scrollArea=d.opts.scrollArea==window?b:d.opts.scrollArea,d.$element.on("touchstart",function(a){d.loading||d.isLock||(e(a),f(a,d))}),d.$element.on("touchmove",function(a){d.loading||d.isLock||(e(a,d),g(a,d))}),d.$element.on("touchend",function(){d.loading||d.isLock||h(d)})},d.prototype.lock=function(){var a=this;a.isLock=!0},d.prototype.unlock=function(){var a=this;a.isLock=!1},d.prototype.resetload=function(){var b=this;b.$domResult&&b.$domResult.css({height:"0"}).on("webkitTransitionEnd",function(){b.loading=!1,b.insertDOM=!1,a(this).remove()})}}(window.Zepto||window.jQuery);
\ No newline at end of file
diff --git a/examples/news-list.html b/examples/news-list.html
new file mode 100644
index 0000000..35fc2cc
--- /dev/null
+++ b/examples/news-list.html
@@ -0,0 +1,253 @@
+<!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;
+    }
+    .header{
+        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:active{
+        background-color: #aaa;
+        color: #fff;
+    }
+    .inner{
+        padding-bottom: 40px;
+        -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.5s linear;
+        animation: opacity 0.5s linear;
+    }
+    @-webkit-keyframes opacity {
+        0% {
+            opacity:0;
+        }
+        100% {
+            opacity:1;
+        }
+    }
+    @keyframes opacity {
+        0% {
+            opacity:0;
+        }
+        100% {
+            opacity:1;
+        }
+    }
+    .footer{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        width: 100%;
+        height: 40px;
+    }
+    .footer a{
+        position: relative;
+        display: block;
+        -webkit-box-flex: 1;
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+        line-height: 40px;
+        text-align: center;
+        color: #666;
+        background-color: #eee;
+        text-decoration: none;
+    }
+    .footer a:before{
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 10px;
+        width: 1px;
+        height: 20px;
+        background-color: #ccc;
+    }
+    .footer a:first-child:before{
+        display: none;
+    }
+    </style>
+    <link rel="stylesheet" href="../dist/dropload.min.css">
+</head>
+<body>
+<div class="header">
+    <h1>就当我是新闻页吧</h1>
+</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 class="footer">
+    <a href="#1" class="item">菜单一</a>
+    <a href="#2" class="item">菜单二</a>
+    <a href="#3" class="item">菜单三</a>
+    <a href="#4" class="item">菜单四</a>
+</div>
+<script src="js/zepto.min.js"></script>
+<script src="../dist/dropload.min.js"></script>
+<script>
+// dropload
+$('.inner').dropload({
+    scrollArea : window,
+    loadDownFn : function(me){
+        $.ajax({
+            type: 'GET',
+            url: 'json/more.json',
+            dataType: 'json',
+            success: function(data){
+                var result = '';
+                for(var i = 0; i < data.lists.length; i++){
+                    result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
+                                    +'<img src="'+data.lists[i].pic+'" alt="">'
+                                    +'<h3>'+data.lists[i].title+'</h3>'
+                                    +'<span class="date">'+data.lists[i].date+'</span>'
+                                +'</a>';
+                }
+                // 为了测试，延迟1秒加载
+                setTimeout(function(){
+                    $('.lists').append(result);
+                    me.resetload();
+                },1000);
+            },
+            error: function(xhr, type){
+                alert('Ajax error!');
+                me.resetload();
+            }
+        });
+    }
+});
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/news-list.png b/examples/news-list.png
new file mode 100644
index 0000000..1a37836
Binary files /dev/null and b/examples/news-list.png differ
diff --git a/examples/product-list.html b/examples/product-list.html
index 1607579..13d1c01 100644
--- a/examples/product-list.html
+++ b/examples/product-list.html
@@ -3,187 +3,134 @@
 <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;
-}
-.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.5s linear;
-    animation: opacity 0.5s linear;
-}
-@-webkit-keyframes opacity {
-    0% {
-        opacity:0;
+    <style>
+    *{
+        margin: 0;
+        padding:0;
+        -webkit-tap-highlight-color:rgba(0,0,0,0);
+        -webkit-text-size-adjust:none;
     }
-    100% {
-        opacity:1;
+    html{
+        font-size:10px;
     }
-}
-@keyframes opacity {
-    0% {
-        opacity:0;
+    body{
+        background-color: #f5f5f5;
+        font-size: 1.2em;
     }
-    100% {
-        opacity:1;
+    .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;
     }
-}
-
-/* dropload */
-.dropload-up,.dropload-down{
-    position: relative;
-    height: 0;
-    overflow: hidden;
-    -webkit-transform:translate3d(0,0,0);
-    transform:translate3d(0,0,0);
-}
-.dropload-refresh,.dropload-update,.dropload-load{
-    position: absolute;
-    left: 50%;
-    bottom: 0;
-    width: 100%;
-    height: 50px;
-    line-height: 50px;
-    text-align: center;
-    -webkit-transform:translate(-50%,0);
-    transform:translate(-50%,0);
-}
-.dropload-load .loading{
-    display: inline-block;
-    height: 15px;
-    width: 15px;
-    border-radius: 100%;
-    margin: 6px;
-    border: 2px solid #666;
-    border-bottom-color: transparent;
-    vertical-align: middle;
-    -webkit-animation: rotate 0.75s 0 linear infinite;
-    animation: rotate 0.75s 0 linear infinite;
-}
-@-webkit-keyframes rotate {
-    0% {
-        -webkit-transform: rotate(0deg);
+    .header{
+        position: relative;
+        height: 44px;
+        line-height: 44px;
+        border-bottom: 1px solid #ccc;
+        background-color: #eee;
     }
-    50% {
-        -webkit-transform: rotate(180deg);
+    .header h1{
+        text-align: center;
+        font-size: 2rem;
+        font-weight: normal;
     }
-    100% {
-        -webkit-transform: rotate(360deg);
+    .header .btn{
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 4em;
+        height: 100%;
+        text-align: center;
+        color: #06c;
+        font-size: 1.4rem;
+        background-color: #ccc;
     }
-}
-@keyframes rotate {
-    0% {
-        transform: rotate(0deg);
+    .header .btn:active{
+        background-color: #aaa;
+        color: #fff;
     }
-    50% {
-        transform: rotate(180deg);
+    .inner{
+        -webkit-box-flex: 1;
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+        background-color: #fff;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;
     }
-    100% {
-        transform: rotate(360deg);
+    .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;
     }
-}
-
-</style>
+    .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.5s linear;
+        animation: opacity 0.5s 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.min.css">
 </head>
 <body>
 <div class="outer">
@@ -193,62 +140,62 @@ <h1>头部</h1>
     </div>
     <div class="inner">
         <div class="lists">
-            <a class="item">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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">
+            <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>
@@ -297,9 +244,9 @@ <h3>12文字描述文字描述文字描述文字描述文字描述</h3>
             success: function(data){
                 var result = '';
                 for(var i = 0; i < data.lists.length; i++){
-                    result +=   '<a class="item opacity">'
+                    result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
                                     +'<img src="'+data.lists[i].pic+'" alt="">'
-                                    +'<h3 href="'+data.lists[i].link+'" >'+data.lists[i].title+'</h3>'
+                                    +'<h3>'+data.lists[i].title+'</h3>'
                                     +'<span class="date">'+data.lists[i].date+'</span>'
                                 +'</a>';
                 }
@@ -324,9 +271,9 @@ <h3>12文字描述文字描述文字描述文字描述文字描述</h3>
             success: function(data){
                 var result = '';
                 for(var i = 0; i < data.lists.length; i++){
-                    result +=   '<a class="item opacity">'
+                    result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
                                     +'<img src="'+data.lists[i].pic+'" alt="">'
-                                    +'<h3 href="'+data.lists[i].link+'" >'+data.lists[i].title+'</h3>'
+                                    +'<h3>'+data.lists[i].title+'</h3>'
                                     +'<span class="date">'+data.lists[i].date+'</span>'
                                 +'</a>';
                 }
diff --git a/examples/product-list.png b/examples/product-list.png
index 5b457ea..932be7c 100644
Binary files a/examples/product-list.png and b/examples/product-list.png differ