You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by cx...@apache.org on 2017/03/06 11:10:12 UTC

[06/12] incubator-weex git commit: * [dev] Add Feature Recycler and Waterfall

* [dev] Add Feature Recycler and Waterfall


Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/c6fddbea
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/c6fddbea
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/c6fddbea

Branch: refs/heads/0.11-dev
Commit: c6fddbea8b5bba05809922cb1a7d766fafdcc0e9
Parents: 917013e
Author: \u9690\u98ce <cx...@gmail.com>
Authored: Mon Mar 6 10:59:54 2017 +0800
Committer: \u9690\u98ce <cx...@gmail.com>
Committed: Mon Mar 6 10:59:54 2017 +0800

----------------------------------------------------------------------
 .../main/java/com/taobao/weex/WXSDKEngine.java  |   9 +-
 .../java/com/taobao/weex/common/Constants.java  |  13 +-
 .../main/java/com/taobao/weex/dom/WXAttr.java   |  96 +++-
 .../java/com/taobao/weex/dom/WXDomHandler.java  |   2 +
 .../java/com/taobao/weex/dom/WXDomManager.java  |   1 +
 .../java/com/taobao/weex/dom/WXDomModule.java   |   8 +-
 .../taobao/weex/dom/WXRecyclerDomObject.java    | 317 +++++++++++
 .../weex/ui/component/WXBasicComponentType.java |   2 +
 .../com/taobao/weex/ui/component/WXHeader.java  |   4 +-
 .../ui/component/list/BasicListComponent.java   |  28 +-
 .../ui/component/list/ListComponentView.java    |   3 -
 .../ui/component/list/SimpleListComponent.java  |   6 +-
 .../weex/ui/component/list/WXListComponent.java |  91 +++-
 .../listview/ExtendedLinearLayoutManager.java   |  25 +
 .../weex/ui/view/listview/WXRecyclerView.java   |  43 +-
 .../listview/adapter/ListBaseViewHolder.java    |   5 +
 .../adapter/RecyclerViewBaseAdapter.java        |  21 +-
 .../adapter/WXRecyclerViewOnScrollListener.java | 107 ++--
 .../ui/view/refresh/wrapper/BaseBounceView.java |  19 +-
 .../refresh/wrapper/BounceRecyclerView.java     |  23 +-
 .../refresh/wrapper/BounceScrollerView.java     |   1 +
 examples/vue/components/waterfall.vue           | 455 ++++++++++++++++
 examples/vue/index.vue                          |   1 +
 ios/playground/WeexDemo/DemoDefine.h            |   2 +-
 ios/playground/WeexDemo/UIView+UIThreadCheck.m  |   2 +-
 ios/playground/WeexDemo/WXDemoViewController.m  |   3 +-
 ios/sdk/WeexSDK.xcodeproj/project.pbxproj       |  75 ++-
 .../Component/Recycler/WXMultiColumnLayout.h    |  42 ++
 .../Component/Recycler/WXMultiColumnLayout.m    | 388 ++++++++++++++
 .../Component/Recycler/WXRecyclerComponent.h    |  12 +
 .../Component/Recycler/WXRecyclerComponent.m    | 525 +++++++++++++++++++
 .../Recycler/WXRecyclerDataController.h         |  34 ++
 .../Recycler/WXRecyclerDataController.m         | 114 ++++
 .../Recycler/WXRecyclerUpdateController.h       |  32 ++
 .../Recycler/WXRecyclerUpdateController.m       | 248 +++++++++
 .../Recycler/WXSectionDataController.h          |  33 ++
 .../Recycler/WXSectionDataController.m          |  81 +++
 .../WeexSDK/Sources/Component/WXCellComponent.h |  22 +-
 .../WeexSDK/Sources/Component/WXCellComponent.m |  27 +-
 .../Component/WXComponent+GradientColor.h       |  15 +-
 .../Component/WXComponent+GradientColor.m       |  15 +-
 .../Sources/Component/WXFooterComponent.h       |  13 +
 .../Sources/Component/WXFooterComponent.m       |  13 +
 .../Sources/Component/WXHeaderComponent.h       |  27 +
 .../Sources/Component/WXHeaderComponent.m       |  68 +++
 .../WeexSDK/Sources/Component/WXListComponent.h |  12 -
 .../WeexSDK/Sources/Component/WXListComponent.m |  71 +--
 ios/sdk/WeexSDK/Sources/Component/WXTransform.m |  18 +-
 ios/sdk/WeexSDK/Sources/Engine/WXSDKEngine.m    |   2 +
 ios/sdk/WeexSDK/Sources/Model/WXComponent.m     |   2 +-
 .../WeexSDK/Sources/Module/WXAnimationModule.m  |   8 +-
 ios/sdk/WeexSDK/Sources/Module/WXMetaModule.m   |   4 +-
 ios/sdk/WeexSDK/Sources/Utility/WXConvert.h     |   2 +
 ios/sdk/WeexSDK/Sources/Utility/WXConvert.m     |  29 +
 ios/sdk/WeexSDK/Sources/Utility/WXDiffUtil.h    |  38 ++
 ios/sdk/WeexSDK/Sources/Utility/WXDiffUtil.m    | 186 +++++++
 ios/sdk/WeexSDK/Sources/Utility/WXLength.h      |  13 +-
 ios/sdk/WeexSDK/Sources/Utility/WXLength.m      |  45 +-
 .../Sources/View/WXComponent+ViewManagement.m   |   4 +-
 59 files changed, 3270 insertions(+), 235 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/WXSDKEngine.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/WXSDKEngine.java b/android/sdk/src/main/java/com/taobao/weex/WXSDKEngine.java
index 9992681..f7bbee7 100755
--- a/android/sdk/src/main/java/com/taobao/weex/WXSDKEngine.java
+++ b/android/sdk/src/main/java/com/taobao/weex/WXSDKEngine.java
@@ -143,11 +143,10 @@ import com.taobao.weex.dom.TextAreaEditTextDomObject;
 import com.taobao.weex.dom.WXDomObject;
 import com.taobao.weex.dom.WXDomRegistry;
 import com.taobao.weex.dom.WXListDomObject;
+import com.taobao.weex.dom.WXRecyclerDomObject;
 import com.taobao.weex.dom.WXScrollerDomObject;
 import com.taobao.weex.dom.WXSwitchDomObject;
 import com.taobao.weex.dom.WXTextDomObject;
-import com.taobao.weex.ui.component.list.SimpleListComponent;
-import com.taobao.weex.ui.module.WXModalUIModule;
 import com.taobao.weex.http.WXStreamModule;
 import com.taobao.weex.ui.ExternalLoaderComponentHolder;
 import com.taobao.weex.ui.IExternalComponentGetter;
@@ -176,9 +175,11 @@ import com.taobao.weex.ui.component.WXText;
 import com.taobao.weex.ui.component.WXVideo;
 import com.taobao.weex.ui.component.WXWeb;
 import com.taobao.weex.ui.component.list.HorizontalListComponent;
+import com.taobao.weex.ui.component.list.SimpleListComponent;
 import com.taobao.weex.ui.component.list.WXCell;
 import com.taobao.weex.ui.component.list.WXListComponent;
 import com.taobao.weex.ui.module.WXMetaModule;
+import com.taobao.weex.ui.module.WXModalUIModule;
 import com.taobao.weex.ui.module.WXTimerModule;
 import com.taobao.weex.ui.module.WXWebViewModule;
 import com.taobao.weex.utils.WXLogUtils;
@@ -352,7 +353,7 @@ public class WXSDKEngine {
         WXBasicComponentType.SLIDER_NEIGHBOR
       );
       registerComponent(SimpleListComponent.class,false,"simplelist");
-      registerComponent(WXListComponent.class, false,WXBasicComponentType.LIST,WXBasicComponentType.VLIST);
+      registerComponent(WXListComponent.class, false,WXBasicComponentType.LIST,WXBasicComponentType.VLIST,WXBasicComponentType.RECYCLER,WXBasicComponentType.WATERFALL);
       registerComponent(HorizontalListComponent.class,false,WXBasicComponentType.HLIST);
       registerComponent(WXBasicComponentType.CELL, WXCell.class, true);
       registerComponent(WXBasicComponentType.INDICATOR, WXIndicator.class, true);
@@ -392,6 +393,8 @@ public class WXSDKEngine {
       registerDomObject(WXBasicComponentType.VLIST, WXListDomObject.class);
       registerDomObject(WXBasicComponentType.HLIST, WXListDomObject.class);
       registerDomObject(WXBasicComponentType.SCROLLER, WXScrollerDomObject.class);
+      registerDomObject(WXBasicComponentType.RECYCLER, WXRecyclerDomObject.class);
+      registerDomObject(WXBasicComponentType.WATERFALL, WXRecyclerDomObject.class);
     } catch (WXException e) {
       WXLogUtils.e("[WXSDKEngine] register:", e);
     }

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/common/Constants.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/common/Constants.java b/android/sdk/src/main/java/com/taobao/weex/common/Constants.java
index e6e61e9..125ae3a 100755
--- a/android/sdk/src/main/java/com/taobao/weex/common/Constants.java
+++ b/android/sdk/src/main/java/com/taobao/weex/common/Constants.java
@@ -296,13 +296,17 @@ public class Constants {
     String RESIZE_MODE = "resizeMode";
     String SHOW_INDICATORS = "showIndicators";
     String AUTO_PLAY = "autoPlay";
-    String SHOW_SCROLLBAR = "showScrollbar";
     String SCROLL_DIRECTION = "scrollDirection";
     String SCOPE = "scope";
     String RECYCLE = "recycle";
     String LOADMORERETRY = "loadmoreretry";
     String LOADMOREOFFSET = "loadmoreoffset";
     String RECYCLE_IMAGE = "recycleImage";
+    String LAYOUT = "layout";
+    String COLUMN_WIDTH= "columnWidth";
+    String COLUMN_COUNT= "columnCount";
+    String COLUMN_GAP= "columnGap";
+    String SHOW_SCROLLBAR= "showScrollbar";
     String OVERFLOW = "overflow";
     String TYPE = "type";
     String PLACEHOLDER = "placeholder";
@@ -352,12 +356,19 @@ public class Constants {
 
     String INSERT_CELL_ANIMATION = "insertAnimation";
     String DELETE_CELL_ANIMATION = "deleteAnimation";
+    String AUTO = "auto";
+    String NORMAL = "normal";
   }
 
   public interface Value {
 
     int NAV_BAR_SHOWN = 0;
     int NAV_BAR_HIDDEN = 1;
+    int AUTO = -1;
+    int COLUMN_GAP_NORMAL = 32;
+    int COLUMN_COUNT_NORMAL = 1;
+    String MULTI_COLUMN= "multi-column";
+    String GRID= "grid";
     String STICKY = "sticky";
     String FIXED = "fixed";
     String LEFT = "left";

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/dom/WXAttr.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/dom/WXAttr.java b/android/sdk/src/main/java/com/taobao/weex/dom/WXAttr.java
index a9ebf60..3846319 100755
--- a/android/sdk/src/main/java/com/taobao/weex/dom/WXAttr.java
+++ b/android/sdk/src/main/java/com/taobao/weex/dom/WXAttr.java
@@ -210,6 +210,7 @@ import android.text.TextUtils;
 
 import com.taobao.weex.common.Constants;
 import com.taobao.weex.common.WXImageSharpen;
+import com.taobao.weex.ui.view.listview.WXRecyclerView;
 import com.taobao.weex.utils.WXLogUtils;
 import com.taobao.weex.utils.WXUtils;
 import com.taobao.weex.utils.WXViewUtils;
@@ -218,6 +219,8 @@ import java.util.Collection;
 import java.util.Map;
 import java.util.Set;
 
+import static java.lang.Boolean.parseBoolean;
+
 /**
  * store value of component attribute
  *
@@ -332,7 +335,7 @@ public class WXAttr implements Map<String, Object>,Cloneable {
       return true;
     }
     try {
-      return Boolean.parseBoolean(String.valueOf(obj));
+      return parseBoolean(String.valueOf(obj));
     } catch (Exception e) {
       WXLogUtils.e("[WXAttr] recycle:", e);
     }
@@ -346,7 +349,7 @@ public class WXAttr implements Map<String, Object>,Cloneable {
     }
 
     try {
-      return Boolean.parseBoolean(String.valueOf(obj));
+      return parseBoolean(String.valueOf(obj));
     } catch (Exception e) {
       WXLogUtils.e("[WXAttr] showIndicators:", e);
     }
@@ -360,7 +363,7 @@ public class WXAttr implements Map<String, Object>,Cloneable {
     }
 
     try {
-      return Boolean.parseBoolean(String.valueOf(obj));
+      return parseBoolean(String.valueOf(obj));
     } catch (Exception e) {
       WXLogUtils.e("[WXAttr] autoPlay:", e);
     }
@@ -409,7 +412,7 @@ public class WXAttr implements Map<String, Object>,Cloneable {
     }
 
     try {
-      return Boolean.parseBoolean(String.valueOf(obj));
+      return parseBoolean(String.valueOf(obj));
     } catch (Exception e) {
       WXLogUtils.e("[WXAttr] recycleImage:", e);
     }
@@ -437,6 +440,91 @@ public class WXAttr implements Map<String, Object>,Cloneable {
     return ret;
   }
 
+  public float getColumnWidth(){
+
+    Object obj = get(Constants.Name.COLUMN_WIDTH);
+    if (obj == null) {
+      return Constants.Value.AUTO;
+    }
+
+    String value = String.valueOf(obj);
+    if(Constants.Name.AUTO.equals(value)){
+      return Constants.Value.AUTO;
+    }
+
+    try {
+      float columnWidth = Float.parseFloat(value);
+      return columnWidth > 0 ? columnWidth : 0;
+    } catch (Exception e) {
+      WXLogUtils.e("[WXAttr] getColumnWidth:", e);
+    }
+    return Constants.Value.AUTO;
+  }
+
+  public int getColumnCount() {
+
+    Object obj = get(Constants.Name.COLUMN_COUNT);
+    if (obj == null) {
+      return Constants.Value.AUTO;
+    }
+
+    String value = String.valueOf(obj);
+    if(Constants.Name.AUTO.equals(value)){
+      return Constants.Value.AUTO;
+    }
+
+    try {
+      int columnCount = Integer.parseInt(value);
+      return columnCount > 0 ? columnCount : Constants.Value.AUTO;
+    } catch (Exception e) {
+      WXLogUtils.e("[WXAttr] getColumnCount:", e);
+      return Constants.Value.AUTO;
+    }
+  }
+
+  public float getColumnGap() {
+
+    Object obj = get(Constants.Name.COLUMN_GAP);
+    if (obj == null) {
+      return Constants.Value.COLUMN_GAP_NORMAL;
+    }
+
+    String value = String.valueOf(obj);
+    if (Constants.Name.NORMAL.equals(value)) {
+      return Constants.Value.COLUMN_GAP_NORMAL;
+    }
+
+    try {
+      float columnGap = Float.parseFloat(value);
+      return columnGap >= 0 ? columnGap : Constants.Value.AUTO;
+    } catch (Exception e) {
+      WXLogUtils.e("[WXAttr] getColumnGap:", e);
+    }
+    return Constants.Value.COLUMN_GAP_NORMAL;
+  }
+
+  public int getLayoutType(){
+    Object obj = get(Constants.Name.LAYOUT);
+    if (obj == null) {
+      return WXRecyclerView.TYPE_LINEAR_LAYOUT;
+    }
+
+    try {
+      switch(String.valueOf(obj)){
+        case Constants.Value.MULTI_COLUMN :
+          return  WXRecyclerView.TYPE_STAGGERED_GRID_LAYOUT;
+        case Constants.Value.GRID :
+          return  WXRecyclerView.TYPE_GRID_LAYOUT;
+        default:
+          return WXRecyclerView.TYPE_LINEAR_LAYOUT;
+      }
+    } catch (Exception e) {
+      WXLogUtils.e("[WXAttr] getLayoutType:", e);
+    }
+    return WXRecyclerView.TYPE_LINEAR_LAYOUT;
+  }
+
+
   @Override
   public boolean equals(Object o) {
     return map.equals(o);

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/dom/WXDomHandler.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/dom/WXDomHandler.java b/android/sdk/src/main/java/com/taobao/weex/dom/WXDomHandler.java
index dc8495e..987d71b 100755
--- a/android/sdk/src/main/java/com/taobao/weex/dom/WXDomHandler.java
+++ b/android/sdk/src/main/java/com/taobao/weex/dom/WXDomHandler.java
@@ -210,6 +210,7 @@ import android.os.Message;
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
 import com.taobao.weex.bridge.JSCallback;
+import com.taobao.weex.utils.WXLogUtils;
 
 /**
  * Handler for dom operations.
@@ -290,6 +291,7 @@ public class WXDomHandler implements Handler.Callback {
                                      (String) task.args.get(2));
         break;
       case MsgType.WX_DOM_BATCH:
+
         mWXDomManager.batch();
         mHasBatch = false;
         break;

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/dom/WXDomManager.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/dom/WXDomManager.java b/android/sdk/src/main/java/com/taobao/weex/dom/WXDomManager.java
index d7ebaa7..6a8f534 100755
--- a/android/sdk/src/main/java/com/taobao/weex/dom/WXDomManager.java
+++ b/android/sdk/src/main/java/com/taobao/weex/dom/WXDomManager.java
@@ -335,6 +335,7 @@ public final class WXDomManager {
    * Batch the execution of {@link WXDomStatement}
    */
   void batch() {
+
     throwIfNotDomThread();
     Iterator<Entry<String, WXDomStatement>> iterator = mDomRegistries.entrySet().iterator();
     while (iterator.hasNext()) {

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/dom/WXDomModule.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/dom/WXDomModule.java b/android/sdk/src/main/java/com/taobao/weex/dom/WXDomModule.java
index ae097fc..d7067ad 100755
--- a/android/sdk/src/main/java/com/taobao/weex/dom/WXDomModule.java
+++ b/android/sdk/src/main/java/com/taobao/weex/dom/WXDomModule.java
@@ -347,7 +347,11 @@ public final class WXDomModule extends WXModule {
           if (args == null) {
             return null;
           }
-          scrollToElement((String) args.get(0), (JSONObject) args.get(1));
+          JSONObject option =null;
+          if(args.size()>1) {
+            option = (JSONObject) args.get(1);
+          }
+          scrollToElement((String) args.get(0),option);
           break;
         case ADD_RULE:
           if (args == null) {
@@ -609,7 +613,7 @@ public final class WXDomModule extends WXModule {
    * @param options scroll option, like {offset:0, duration:300}
    */
   public void scrollToElement(String ref, JSONObject options) {
-    if (TextUtils.isEmpty(ref) || options == null) {
+    if (TextUtils.isEmpty(ref) ) {
       return;
     }
 

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/dom/WXRecyclerDomObject.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/dom/WXRecyclerDomObject.java b/android/sdk/src/main/java/com/taobao/weex/dom/WXRecyclerDomObject.java
new file mode 100644
index 0000000..3ee0e06
--- /dev/null
+++ b/android/sdk/src/main/java/com/taobao/weex/dom/WXRecyclerDomObject.java
@@ -0,0 +1,317 @@
+/**
+ *
+ *                                  Apache License
+ *                            Version 2.0, January 2004
+ *                         http://www.apache.org/licenses/
+ *
+ *    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+ *
+ *    1. Definitions.
+ *
+ *       "License" shall mean the terms and conditions for use, reproduction,
+ *       and distribution as defined by Sections 1 through 9 of this document.
+ *
+ *       "Licensor" shall mean the copyright owner or entity authorized by
+ *       the copyright owner that is granting the License.
+ *
+ *       "Legal Entity" shall mean the union of the acting entity and all
+ *       other entities that control, are controlled by, or are under common
+ *       control with that entity. For the purposes of this definition,
+ *       "control" means (i) the power, direct or indirect, to cause the
+ *       direction or management of such entity, whether by contract or
+ *       otherwise, or (ii) ownership of fifty percent (50%) or more of the
+ *       outstanding shares, or (iii) beneficial ownership of such entity.
+ *
+ *       "You" (or "Your") shall mean an individual or Legal Entity
+ *       exercising permissions granted by this License.
+ *
+ *       "Source" form shall mean the preferred form for making modifications,
+ *       including but not limited to software source code, documentation
+ *       source, and configuration files.
+ *
+ *       "Object" form shall mean any form resulting from mechanical
+ *       transformation or translation of a Source form, including but
+ *       not limited to compiled object code, generated documentation,
+ *       and conversions to other media types.
+ *
+ *       "Work" shall mean the work of authorship, whether in Source or
+ *       Object form, made available under the License, as indicated by a
+ *       copyright notice that is included in or attached to the work
+ *       (an example is provided in the Appendix below).
+ *
+ *       "Derivative Works" shall mean any work, whether in Source or Object
+ *       form, that is based on (or derived from) the Work and for which the
+ *       editorial revisions, annotations, elaborations, or other modifications
+ *       represent, as a whole, an original work of authorship. For the purposes
+ *       of this License, Derivative Works shall not include works that remain
+ *       separable from, or merely link (or bind by name) to the interfaces of,
+ *       the Work and Derivative Works thereof.
+ *
+ *       "Contribution" shall mean any work of authorship, including
+ *       the original version of the Work and any modifications or additions
+ *       to that Work or Derivative Works thereof, that is intentionally
+ *       submitted to Licensor for inclusion in the Work by the copyright owner
+ *       or by an individual or Legal Entity authorized to submit on behalf of
+ *       the copyright owner. For the purposes of this definition, "submitted"
+ *       means any form of electronic, verbal, or written communication sent
+ *       to the Licensor or its representatives, including but not limited to
+ *       communication on electronic mailing lists, source code control systems,
+ *       and issue tracking systems that are managed by, or on behalf of, the
+ *       Licensor for the purpose of discussing and improving the Work, but
+ *       excluding communication that is conspicuously marked or otherwise
+ *       designated in writing by the copyright owner as "Not a Contribution."
+ *
+ *       "Contributor" shall mean Licensor and any individual or Legal Entity
+ *       on behalf of whom a Contribution has been received by Licensor and
+ *       subsequently incorporated within the Work.
+ *
+ *    2. Grant of Copyright License. Subject to the terms and conditions of
+ *       this License, each Contributor hereby grants to You a perpetual,
+ *       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ *       copyright license to reproduce, prepare Derivative Works of,
+ *       publicly display, publicly perform, sublicense, and distribute the
+ *       Work and such Derivative Works in Source or Object form.
+ *
+ *    3. Grant of Patent License. Subject to the terms and conditions of
+ *       this License, each Contributor hereby grants to You a perpetual,
+ *       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+ *       (except as stated in this section) patent license to make, have made,
+ *       use, offer to sell, sell, import, and otherwise transfer the Work,
+ *       where such license applies only to those patent claims licensable
+ *       by such Contributor that are necessarily infringed by their
+ *       Contribution(s) alone or by combination of their Contribution(s)
+ *       with the Work to which such Contribution(s) was submitted. If You
+ *       institute patent litigation against any entity (including a
+ *       cross-claim or counterclaim in a lawsuit) alleging that the Work
+ *       or a Contribution incorporated within the Work constitutes direct
+ *       or contributory patent infringement, then any patent licenses
+ *       granted to You under this License for that Work shall terminate
+ *       as of the date such litigation is filed.
+ *
+ *    4. Redistribution. You may reproduce and distribute copies of the
+ *       Work or Derivative Works thereof in any medium, with or without
+ *       modifications, and in Source or Object form, provided that You
+ *       meet the following conditions:
+ *
+ *       (a) You must give any other recipients of the Work or
+ *           Derivative Works a copy of this License; and
+ *
+ *       (b) You must cause any modified files to carry prominent notices
+ *           stating that You changed the files; and
+ *
+ *       (c) You must retain, in the Source form of any Derivative Works
+ *           that You distribute, all copyright, patent, trademark, and
+ *           attribution notices from the Source form of the Work,
+ *           excluding those notices that do not pertain to any part of
+ *           the Derivative Works; and
+ *
+ *       (d) If the Work includes a "NOTICE" text file as part of its
+ *           distribution, then any Derivative Works that You distribute must
+ *           include a readable copy of the attribution notices contained
+ *           within such NOTICE file, excluding those notices that do not
+ *           pertain to any part of the Derivative Works, in at least one
+ *           of the following places: within a NOTICE text file distributed
+ *           as part of the Derivative Works; within the Source form or
+ *           documentation, if provided along with the Derivative Works; or,
+ *           within a display generated by the Derivative Works, if and
+ *           wherever such third-party notices normally appear. The contents
+ *           of the NOTICE file are for informational purposes only and
+ *           do not modify the License. You may add Your own attribution
+ *           notices within Derivative Works that You distribute, alongside
+ *           or as an addendum to the NOTICE text from the Work, provided
+ *           that such additional attribution notices cannot be construed
+ *           as modifying the License.
+ *
+ *       You may add Your own copyright statement to Your modifications and
+ *       may provide additional or different license terms and conditions
+ *       for use, reproduction, or distribution of Your modifications, or
+ *       for any such Derivative Works as a whole, provided Your use,
+ *       reproduction, and distribution of the Work otherwise complies with
+ *       the conditions stated in this License.
+ *
+ *    5. Submission of Contributions. Unless You explicitly state otherwise,
+ *       any Contribution intentionally submitted for inclusion in the Work
+ *       by You to the Licensor shall be under the terms and conditions of
+ *       this License, without any additional terms or conditions.
+ *       Notwithstanding the above, nothing herein shall supersede or modify
+ *       the terms of any separate license agreement you may have executed
+ *       with Licensor regarding such Contributions.
+ *
+ *    6. Trademarks. This License does not grant permission to use the trade
+ *       names, trademarks, service marks, or product names of the Licensor,
+ *       except as required for reasonable and customary use in describing the
+ *       origin of the Work and reproducing the content of the NOTICE file.
+ *
+ *    7. Disclaimer of Warranty. Unless required by applicable law or
+ *       agreed to in writing, Licensor provides the Work (and each
+ *       Contributor provides its Contributions) on an "AS IS" BASIS,
+ *       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+ *       implied, including, without limitation, any warranties or conditions
+ *       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+ *       PARTICULAR PURPOSE. You are solely responsible for determining the
+ *       appropriateness of using or redistributing the Work and assume any
+ *       risks associated with Your exercise of permissions under this License.
+ *
+ *    8. Limitation of Liability. In no event and under no legal theory,
+ *       whether in tort (including negligence), contract, or otherwise,
+ *       unless required by applicable law (such as deliberate and grossly
+ *       negligent acts) or agreed to in writing, shall any Contributor be
+ *       liable to You for damages, including any direct, indirect, special,
+ *       incidental, or consequential damages of any character arising as a
+ *       result of this License or out of the use or inability to use the
+ *       Work (including but not limited to damages for loss of goodwill,
+ *       work stoppage, computer failure or malfunction, or any and all
+ *       other commercial damages or losses), even if such Contributor
+ *       has been advised of the possibility of such damages.
+ *
+ *    9. Accepting Warranty or Additional Liability. While redistributing
+ *       the Work or Derivative Works thereof, You may choose to offer,
+ *       and charge a fee for, acceptance of support, warranty, indemnity,
+ *       or other liability obligations and/or rights consistent with this
+ *       License. However, in accepting such obligations, You may act only
+ *       on Your own behalf and on Your sole responsibility, not on behalf
+ *       of any other Contributor, and only if You agree to indemnify,
+ *       defend, and hold each Contributor harmless for any liability
+ *       incurred by, or claims asserted against, such Contributor by reason
+ *       of your accepting any such warranty or additional liability.
+ *
+ *    END OF TERMS AND CONDITIONS
+ *
+ *    APPENDIX: How to apply the Apache License to your work.
+ *
+ *       To apply the Apache License to your work, attach the following
+ *       boilerplate notice, with the fields enclosed by brackets "[]"
+ *       replaced with your own identifying information. (Don't include
+ *       the brackets!)  The text should be enclosed in the appropriate
+ *       comment syntax for the file format. We also recommend that a
+ *       file or class name and description of purpose be included on the
+ *       same "printed page" as the copyright notice for easier
+ *       identification within third-party archives.
+ *
+ *    Copyright 2016 Alibaba Group
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+package com.taobao.weex.dom;
+
+import com.taobao.weex.WXEnvironment;
+import com.taobao.weex.common.Constants;
+import com.taobao.weex.dom.flex.Spacing;
+import com.taobao.weex.ui.component.WXBasicComponentType;
+import com.taobao.weex.utils.WXLogUtils;
+import com.taobao.weex.utils.WXViewUtils;
+
+import java.util.Map;
+
+/**
+ * Created by zhengshihan on 2017/2/21.
+ */
+
+public class WXRecyclerDomObject extends WXDomObject{
+
+
+    private int mColumnCount = Constants.Value.COLUMN_COUNT_NORMAL;
+    private float mColumnWidth = Constants.Value.AUTO;
+    private float mColumnGap = Constants.Value.COLUMN_GAP_NORMAL;
+    private boolean mIsPreCalculateCellWidth =false;
+
+    public int getLayoutType(){
+        return getAttrs().getLayoutType();
+    }
+
+    public float getColumnGap() {
+        return mColumnGap;
+    }
+
+    public int getColumnCount() {
+        return mColumnCount;
+    }
+
+    public float getColumnWidth() {
+        return mColumnWidth;
+    }
+    @Override
+    public void add(WXDomObject child, int index) {
+        super.add(child, index);
+
+        if (WXBasicComponentType.CELL.equals(child.getType())) {
+            if (!mIsPreCalculateCellWidth) {
+                preCalculateCellWidth();
+            }
+            child.getStyles().put(Constants.Name.WIDTH, mColumnWidth);
+        }
+    }
+
+    public void preCalculateCellWidth(){
+
+        if (getAttrs() != null) {
+            mColumnCount = getAttrs().getColumnCount();
+            mColumnWidth = getAttrs().getColumnWidth();
+            mColumnGap =  getAttrs().getColumnGap();
+
+            float availableWidth = getStyleWidth()-getPadding().get(Spacing.LEFT)-getPadding().get(Spacing.RIGHT);
+            availableWidth = WXViewUtils.getWebPxByWidth(availableWidth,getViewPortWidth());
+
+            if (Constants.Value.AUTO == mColumnCount && Constants.Value.AUTO == mColumnWidth) {
+                mColumnCount = Constants.Value.COLUMN_COUNT_NORMAL;
+            } else if (Constants.Value.AUTO == mColumnWidth && Constants.Value.AUTO != mColumnCount) {
+                mColumnWidth = (availableWidth - ((mColumnCount - 1) * mColumnGap)) / mColumnCount;
+                mColumnWidth = mColumnWidth > 0 ? mColumnWidth :0;
+            } else if (Constants.Value.AUTO != mColumnWidth && Constants.Value.AUTO == mColumnCount) {
+                mColumnCount = Math.round((availableWidth + mColumnGap) / (mColumnWidth + mColumnGap)-0.5f);
+                mColumnCount = mColumnCount > 0 ? mColumnCount :1;
+                mColumnWidth =((availableWidth + mColumnGap) / mColumnCount) - mColumnGap;
+            } else if(Constants.Value.AUTO != mColumnWidth && Constants.Value.AUTO != mColumnCount){
+                int columnCount = Math.round((availableWidth + mColumnGap) / (mColumnWidth + mColumnGap)-0.5f);
+                mColumnCount = columnCount > mColumnCount ? mColumnCount :columnCount;
+                mColumnWidth= ((availableWidth + mColumnGap) / mColumnCount) - mColumnGap;
+            }
+            mIsPreCalculateCellWidth = true;
+            if(WXEnvironment.isApkDebugable()) {
+                WXLogUtils.d("preCalculateCellWidth mColumnGap :" + mColumnGap + " mColumnWidth:" + mColumnWidth + " mColumnCount:" + mColumnCount);
+            }
+
+        }
+    }
+
+    public void updateRecyclerAttr(){
+        preCalculateCellWidth();
+        int count = getChildCount();
+        for(int i=0;i<count; i++){
+            WXDomObject domObject = getChild(i);
+            if(WXBasicComponentType.CELL.equals(domObject.getType())) {
+                getChild(i).getStyles().put(Constants.Name.WIDTH, mColumnWidth);
+            }
+        }
+    }
+
+    @Override
+    public void updateAttr(Map<String, Object> attrs) {
+        super.updateAttr(attrs);
+        if(attrs.containsKey(Constants.Name.COLUMN_COUNT)
+                || attrs.containsKey(Constants.Name.COLUMN_GAP)
+                || attrs.containsKey(Constants.Name.COLUMN_WIDTH)){
+            updateRecyclerAttr();
+        }
+    }
+
+    @Override
+    public void updateStyle(Map<String, Object> styles, boolean byPesudo) {
+        super.updateStyle(styles, byPesudo);
+        if(styles.containsKey(Constants.Name.PADDING)
+                ||styles.containsKey(Constants.Name.PADDING_LEFT)
+                || styles.containsKey(Constants.Name.PADDING_RIGHT)){
+            preCalculateCellWidth();
+        }
+    }
+}

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/component/WXBasicComponentType.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/component/WXBasicComponentType.java b/android/sdk/src/main/java/com/taobao/weex/ui/component/WXBasicComponentType.java
index 6d8da28..0d47232 100755
--- a/android/sdk/src/main/java/com/taobao/weex/ui/component/WXBasicComponentType.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/component/WXBasicComponentType.java
@@ -218,6 +218,8 @@ public class WXBasicComponentType {
   public static final String SLIDER = "slider";
   public static final String SLIDER_NEIGHBOR = "slider-neighbor";
   public static final String LIST = "list";
+  public static final String RECYCLER = "recycler";
+  public static final String WATERFALL = "waterfall";
   public static final String VLIST = "vlist";
   public static final String HLIST = "hlist";
   public static final String CELL = "cell";

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/component/WXHeader.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/component/WXHeader.java b/android/sdk/src/main/java/com/taobao/weex/ui/component/WXHeader.java
index e988d46..010dd5a 100755
--- a/android/sdk/src/main/java/com/taobao/weex/ui/component/WXHeader.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/component/WXHeader.java
@@ -223,7 +223,9 @@ public class WXHeader extends WXCell {
 
   public WXHeader(WXSDKInstance instance, WXDomObject node, WXVContainer parent, boolean lazy) {
     super(instance, node, parent, lazy);
-    setSticky(Constants.Value.STICKY);
+    if(WXBasicComponentType.LIST.equals((parent.getDomObject().getType()))){
+      setSticky(Constants.Value.STICKY);
+    }
   }
 
   @Override

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/component/list/BasicListComponent.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/component/list/BasicListComponent.java b/android/sdk/src/main/java/com/taobao/weex/ui/component/list/BasicListComponent.java
index 142e22f..fffe843 100644
--- a/android/sdk/src/main/java/com/taobao/weex/ui/component/list/BasicListComponent.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/component/list/BasicListComponent.java
@@ -213,6 +213,7 @@ import android.os.Build;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.support.v4.util.ArrayMap;
+import android.support.v7.widget.GridLayoutManager;
 import android.support.v7.widget.LinearLayoutManager;
 import android.support.v7.widget.RecyclerView;
 import android.support.v7.widget.StaggeredGridLayoutManager;
@@ -285,6 +286,12 @@ public abstract class BasicListComponent<T extends ViewGroup & ListComponentView
   private static boolean mAllowCacheViewHolder = true;
   private static boolean mDownForBidCacheViewHolder = false;
 
+
+  protected int mLayoutType = WXRecyclerView.TYPE_LINEAR_LAYOUT;
+  protected int mColumnCount = 1;
+  protected float mColumnGap = 0;
+  protected float mColumnWidth = 0;
+
   private int mOffsetAccuracy = 10;
   private Point mLastReport = new Point(-1, -1);
 
@@ -314,7 +321,7 @@ public abstract class BasicListComponent<T extends ViewGroup & ListComponentView
     int screenH = WXViewUtils.getScreenHeight(WXEnvironment.sApplication);
     int weexH = WXViewUtils.getWeexHeight(getInstanceId());
     int outHeight = height > (weexH >= screenH ? screenH : weexH) ? weexH - getAbsoluteY() : height;
-    return super.measure(width, outHeight);
+    return super.measure((int)(width+mColumnGap), outHeight);
   }
 
   public int getOrientation() {
@@ -678,13 +685,22 @@ public abstract class BasicListComponent<T extends ViewGroup & ListComponentView
 
           RecyclerView.LayoutManager layoutManager;
           boolean beforeFirstVisibleItem = false;
-          if ((layoutManager = getHostView().getInnerView().getLayoutManager()) instanceof LinearLayoutManager) {
+          layoutManager = getHostView().getInnerView().getLayoutManager();
+          if (layoutManager instanceof LinearLayoutManager || layoutManager instanceof GridLayoutManager) {
             int fVisible = ((LinearLayoutManager) layoutManager).findFirstVisibleItemPosition();
             int pos = mChildren.indexOf(cell);
 
             if (pos <= fVisible) {
               beforeFirstVisibleItem = true;
             }
+          } else if(layoutManager instanceof StaggeredGridLayoutManager){
+            int [] firstItems= new int[3];
+            int fVisible = ((StaggeredGridLayoutManager) layoutManager).findFirstVisibleItemPositions(firstItems)[0];
+            int pos = mChildren.indexOf(cell);
+
+            if (pos <= fVisible) {
+              beforeFirstVisibleItem = true;
+            }
           }
 
           int[] location = new int[2];
@@ -935,9 +951,14 @@ public abstract class BasicListComponent<T extends ViewGroup & ListComponentView
 
   }
 
+  protected void markComponentUsable(){
+    for (WXComponent component : mChildren){
+      component.setUsing(false);
+    }
+  }
   /**
    * Create an instance of {@link ListBaseViewHolder} for the given viewType (not for the given
-   * index). This method will look up for the first component that fits the viewType requirement and
+   * index). This  markComponentUsable();method will look up for the first component that fits the viewType requirement and
    * doesn't be used. Then create the certain type of view, detach the view f[rom the component.
    *
    * @param parent   the ViewGroup into which the new view will be inserted
@@ -1233,7 +1254,6 @@ public abstract class BasicListComponent<T extends ViewGroup & ListComponentView
 
             contentOffset.put(Constants.Name.X, - WXViewUtils.getWebPxByWidth(offsetX, getInstance().getViewPortWidth()));
             contentOffset.put(Constants.Name.Y, - WXViewUtils.getWebPxByWidth(offsetY, getInstance().getViewPortWidth()));
-
             event.put(Constants.Name.CONTENT_SIZE, contentSize);
             event.put(Constants.Name.CONTENT_OFFSET, contentOffset);
 

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/component/list/ListComponentView.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/component/list/ListComponentView.java b/android/sdk/src/main/java/com/taobao/weex/ui/component/list/ListComponentView.java
index 648c747..b95ea9e 100644
--- a/android/sdk/src/main/java/com/taobao/weex/ui/component/list/ListComponentView.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/component/list/ListComponentView.java
@@ -204,9 +204,6 @@
  */
 package com.taobao.weex.ui.component.list;
 
-import android.support.v7.widget.RecyclerView;
-import android.view.View;
-
 import com.taobao.weex.ui.view.listview.WXRecyclerView;
 import com.taobao.weex.ui.view.listview.adapter.RecyclerViewBaseAdapter;
 

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/component/list/SimpleListComponent.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/component/list/SimpleListComponent.java b/android/sdk/src/main/java/com/taobao/weex/ui/component/list/SimpleListComponent.java
index 4fb0e80..36b9ebb 100644
--- a/android/sdk/src/main/java/com/taobao/weex/ui/component/list/SimpleListComponent.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/component/list/SimpleListComponent.java
@@ -224,8 +224,12 @@ public class SimpleListComponent extends BasicListComponent<SimpleRecyclerView>{
 
   @Override
   protected SimpleRecyclerView generateListView(Context context, int orientation) {
+    return generateListView(context,WXRecyclerView.TYPE_LINEAR_LAYOUT,orientation);
+  }
+
+  protected SimpleRecyclerView generateListView(Context context, int type,int orientation) {
     SimpleRecyclerView view = new SimpleRecyclerView(context);
-    view.initView(context, WXRecyclerView.TYPE_LINEAR_LAYOUT, orientation);
+    view.initView(context, type, orientation);
     return view;
   }
 }

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/component/list/WXListComponent.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/component/list/WXListComponent.java b/android/sdk/src/main/java/com/taobao/weex/ui/component/list/WXListComponent.java
index 3e68de1..7e1d86d 100755
--- a/android/sdk/src/main/java/com/taobao/weex/ui/component/list/WXListComponent.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/component/list/WXListComponent.java
@@ -208,16 +208,24 @@ import android.content.Context;
 
 import com.taobao.weex.WXSDKInstance;
 import com.taobao.weex.annotation.Component;
+import com.taobao.weex.common.Constants;
 import com.taobao.weex.dom.WXDomObject;
+import com.taobao.weex.dom.WXRecyclerDomObject;
+import com.taobao.weex.dom.flex.Spacing;
 import com.taobao.weex.ui.component.WXBaseRefresh;
+import com.taobao.weex.ui.component.WXBasicComponentType;
 import com.taobao.weex.ui.component.WXComponent;
+import com.taobao.weex.ui.component.WXComponentProp;
 import com.taobao.weex.ui.component.WXLoading;
 import com.taobao.weex.ui.component.WXRefresh;
 import com.taobao.weex.ui.component.WXVContainer;
+import com.taobao.weex.ui.view.listview.WXRecyclerView;
 import com.taobao.weex.ui.view.listview.adapter.ListBaseViewHolder;
 import com.taobao.weex.ui.view.refresh.wrapper.BounceRecyclerView;
 import com.taobao.weex.utils.WXLogUtils;
 
+import java.util.Map;
+
 /**
  * Unlike other components, there is immutable bi-directional association between View and
  * ViewHolder, while only mutable and temporal uni-directional association between view and
@@ -229,19 +237,36 @@ import com.taobao.weex.utils.WXLogUtils;
 
 public class WXListComponent extends BasicListComponent<BounceRecyclerView> {
   private String TAG = "WXListComponent";
+  private WXRecyclerDomObject mDomObject;
+  private float mPaddingLeft;
+  private float mPaddingRight;
 
   @Deprecated
   public WXListComponent(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, String instanceId, boolean isLazy) {
     this(instance, dom, parent, isLazy);
   }
 
+
   public WXListComponent(WXSDKInstance instance, WXDomObject node, WXVContainer parent, boolean lazy) {
     super(instance, node, parent);
+    if (node != null && node instanceof WXRecyclerDomObject) {
+      mDomObject = (WXRecyclerDomObject) node;
+      mDomObject.preCalculateCellWidth();
+
+      if(WXBasicComponentType.WATERFALL.equals(node.getType())){
+        mLayoutType = WXRecyclerView.TYPE_STAGGERED_GRID_LAYOUT;
+      }else{
+        mLayoutType = mDomObject.getLayoutType();
+      }
+      updateRecyclerAttr();
+
+    }
   }
 
   @Override
   protected BounceRecyclerView generateListView(Context context, int orientation) {
-    return new BounceRecyclerView(context, orientation);
+
+    return new BounceRecyclerView(context,mLayoutType,mColumnCount,mColumnGap,orientation);
   }
 
   @Override
@@ -286,10 +311,72 @@ public class WXListComponent extends BasicListComponent<BounceRecyclerView> {
       }, 100);
       return true;
     }
-
     return false;
   }
 
+  private void updateRecyclerAttr(){
+    mColumnCount = mDomObject.getColumnCount();
+    mColumnGap = mDomObject.getColumnGap();
+    mColumnWidth = mDomObject.getColumnWidth();
+    mPaddingLeft =mDomObject.getPadding().get(Spacing.LEFT);
+    mPaddingRight =mDomObject.getPadding().get(Spacing.RIGHT);
+  }
+
+  @WXComponentProp(name = Constants.Name.COLUMN_WIDTH)
+  public void setColumnWidth(int columnCount)  {
+    if(mDomObject.getColumnWidth() != mColumnWidth){
+      markComponentUsable();
+      updateRecyclerAttr();
+      WXRecyclerView wxRecyclerView = getHostView().getInnerView();
+      wxRecyclerView.initView(getContext(), mLayoutType,mColumnCount,mColumnGap,getOrientation());
+    }
+  }
+
+  @WXComponentProp(name = Constants.Name.COLUMN_COUNT)
+  public void setColumnCount(int columnCount){
+    if(mDomObject.getColumnCount() != mColumnCount){
+      markComponentUsable();
+      updateRecyclerAttr();
+      WXRecyclerView wxRecyclerView = getHostView().getInnerView();
+      wxRecyclerView.initView(getContext(), mLayoutType,mColumnCount,mColumnGap,getOrientation());
+    }
+  }
+
+  @WXComponentProp(name = Constants.Name.COLUMN_GAP)
+  public void setColumnGap(float columnGap) throws InterruptedException {
+    if(mDomObject.getColumnGap() != mColumnGap) {
+      markComponentUsable();
+      updateRecyclerAttr();
+      WXRecyclerView wxRecyclerView = getHostView().getInnerView();
+      wxRecyclerView.initView(getContext(), mLayoutType, mColumnCount, mColumnGap, getOrientation());
+    }
+  }
+
+  @WXComponentProp(name = Constants.Name.SCROLLABLE)
+  public void setScrollable(boolean scrollable) {
+    WXRecyclerView inner = getHostView().getInnerView();
+    inner.setScrollable(scrollable);
+  }
+
+  @Override
+  public void updateProperties(Map<String, Object> props) {
+    super.updateProperties(props);
+    if(props.containsKey(Constants.Name.PADDING)
+            ||props.containsKey(Constants.Name.PADDING_LEFT)
+            || props.containsKey(Constants.Name.PADDING_RIGHT)){
+
+      if(mPaddingLeft !=mDomObject.getPadding().get(Spacing.LEFT)
+              || mPaddingRight !=mDomObject.getPadding().get(Spacing.RIGHT)) {
+
+        markComponentUsable();
+        updateRecyclerAttr();
+        WXRecyclerView wxRecyclerView = getHostView().getInnerView();
+        wxRecyclerView.initView(getContext(), mLayoutType, mColumnCount, mColumnGap, getOrientation());
+      }
+    }
+
+  }
+
   @Override
   public void createChildViewAt(int index) {
     int indexToCreate = index;

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/ExtendedLinearLayoutManager.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/ExtendedLinearLayoutManager.java b/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/ExtendedLinearLayoutManager.java
index be8afae..80feb71 100644
--- a/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/ExtendedLinearLayoutManager.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/ExtendedLinearLayoutManager.java
@@ -227,6 +227,31 @@ public class ExtendedLinearLayoutManager extends LinearLayoutManager{
     }
 
     @Override
+    public boolean supportsPredictiveItemAnimations() {
+        return false;
+    }
+
+    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
+        try {
+            super.onLayoutChildren(recycler, state);
+        } catch (IndexOutOfBoundsException e) {
+            e.printStackTrace();
+
+        }
+    }
+
+    @Override
+    public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
+        try {
+            return super.scrollVerticallyBy(dy, recycler, state);
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return 0;
+    }
+
+
+    @Override
     public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state,
                                        int position) {
         if (smoothScroller == null) {

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/WXRecyclerView.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/WXRecyclerView.java b/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/WXRecyclerView.java
index fe912af..4352cfe 100755
--- a/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/WXRecyclerView.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/WXRecyclerView.java
@@ -204,7 +204,9 @@
  */
 package com.taobao.weex.ui.view.listview;
 
+import android.annotation.TargetApi;
 import android.content.Context;
+import android.os.Build;
 import android.support.annotation.Nullable;
 import android.support.v7.widget.GridLayoutManager;
 import android.support.v7.widget.OrientationHelper;
@@ -212,6 +214,7 @@ import android.support.v7.widget.RecyclerView;
 import android.support.v7.widget.StaggeredGridLayoutManager;
 import android.view.MotionEvent;
 
+import com.taobao.weex.common.Constants;
 import com.taobao.weex.common.WXThread;
 import com.taobao.weex.ui.view.gesture.WXGesture;
 import com.taobao.weex.ui.view.gesture.WXGestureObservable;
@@ -222,7 +225,6 @@ public class WXRecyclerView extends RecyclerView implements WXGestureObservable
   public static final int TYPE_GRID_LAYOUT = 2;
   public static final int TYPE_STAGGERED_GRID_LAYOUT = 3;
   private WXGesture mGesture;
-
   private boolean scrollable = true;
 
   public WXRecyclerView(Context context) {
@@ -241,6 +243,10 @@ public class WXRecyclerView extends RecyclerView implements WXGestureObservable
   public boolean postDelayed(Runnable action, long delayMillis) {
     return super.postDelayed(WXThread.secure(action), delayMillis);
   }
+  public void initView(Context context, int type,int orientation) {
+    initView(context,type, Constants.Value.COLUMN_COUNT_NORMAL,Constants.Value.COLUMN_GAP_NORMAL,orientation);
+  }
+
 
   /**
    *
@@ -248,39 +254,14 @@ public class WXRecyclerView extends RecyclerView implements WXGestureObservable
    * @param type
    * @param orientation should be {@link OrientationHelper#HORIZONTAL} or {@link OrientationHelper#VERTICAL}
    */
-  public void initView(Context context, int type,int orientation) {
+  @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
+  public void initView(Context context, int type, int columnCount, float columnGap, int orientation) {
     if (type == TYPE_GRID_LAYOUT) {
-      setLayoutManager(new GridLayoutManager(context, 2,orientation,false));
+      setLayoutManager(new GridLayoutManager(context, columnCount,orientation,false));
     } else if (type == TYPE_STAGGERED_GRID_LAYOUT) {
-      setLayoutManager(new StaggeredGridLayoutManager(2, orientation));
+      setLayoutManager(new StaggeredGridLayoutManager(columnCount, orientation));
     } else if (type == TYPE_LINEAR_LAYOUT) {
-      setLayoutManager(new ExtendedLinearLayoutManager(context,orientation,false){
-
-        @Override
-        public boolean supportsPredictiveItemAnimations() {
-          return false;
-        }
-
-        public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
-          try {
-            super.onLayoutChildren(recycler, state);
-          } catch (IndexOutOfBoundsException e) {
-             e.printStackTrace();
-
-          }
-        }
-
-        @Override
-        public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
-          try {
-            return super.scrollVerticallyBy(dy, recycler, state);
-          } catch (Exception e) {
-            e.printStackTrace();
-          }
-          return 0;
-        }
-
-      });
+      setLayoutManager(new ExtendedLinearLayoutManager(context,orientation,false));
     }
   }
 

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/ListBaseViewHolder.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/ListBaseViewHolder.java b/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/ListBaseViewHolder.java
index 903ebd6..8d22e96 100755
--- a/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/ListBaseViewHolder.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/ListBaseViewHolder.java
@@ -208,6 +208,7 @@ import android.support.v7.widget.RecyclerView;
 import android.view.View;
 
 import com.taobao.weex.ui.component.WXComponent;
+import com.taobao.weex.ui.component.WXHeader;
 
 import java.lang.ref.WeakReference;
 
@@ -251,6 +252,10 @@ public class ListBaseViewHolder extends RecyclerView.ViewHolder {
       isRecycled = false;
     }
   }
+    
+  public boolean isFullSpan() {
+    return mComponent != null && mComponent.get() instanceof WXHeader;
+  }
 
   public boolean canRecycled() {
     if (mComponent != null && mComponent.get() != null) {

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/RecyclerViewBaseAdapter.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/RecyclerViewBaseAdapter.java b/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/RecyclerViewBaseAdapter.java
index 9c89ed1..2b77146 100755
--- a/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/RecyclerViewBaseAdapter.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/RecyclerViewBaseAdapter.java
@@ -205,6 +205,7 @@
 package com.taobao.weex.ui.view.listview.adapter;
 
 import android.support.v7.widget.RecyclerView;
+import android.support.v7.widget.StaggeredGridLayoutManager;
 import android.view.ViewGroup;
 
 
@@ -213,7 +214,6 @@ import android.view.ViewGroup;
  */
 public class RecyclerViewBaseAdapter<T extends ListBaseViewHolder> extends RecyclerView.Adapter<T> {
 
-  private String TAG = "RecyclerViewBaseAdapter";
   private IRecyclerAdapterListener iRecyclerAdapterListener;
 
   public RecyclerViewBaseAdapter(IRecyclerAdapterListener Listener) {
@@ -222,7 +222,6 @@ public class RecyclerViewBaseAdapter<T extends ListBaseViewHolder> extends Recyc
 
   @Override
   public T onCreateViewHolder(ViewGroup parent, int viewType) {
-    //        WXLogUtils.d(TAG, "onCreateViewHolder viewType:" + viewType);
     if (iRecyclerAdapterListener != null) {
       return (T) iRecyclerAdapterListener.onCreateViewHolder(parent, viewType);
     }
@@ -231,8 +230,21 @@ public class RecyclerViewBaseAdapter<T extends ListBaseViewHolder> extends Recyc
   }
 
   @Override
+  public void onViewAttachedToWindow(T holder) {
+    super.onViewAttachedToWindow(holder);
+    if( holder !=null && holder.isFullSpan()){
+      ViewGroup.LayoutParams lp = holder.itemView.getLayoutParams();
+      if(lp != null
+              && lp instanceof StaggeredGridLayoutManager.LayoutParams
+              ) {
+        StaggeredGridLayoutManager.LayoutParams p = (StaggeredGridLayoutManager.LayoutParams) lp;
+        p.setFullSpan(true);
+      }
+    }
+  }
+
+  @Override
   public void onBindViewHolder(T viewHolder, int i) {
-    //        WXLogUtils.d(TAG, "onBindViewHolder position: " + i);
     if (iRecyclerAdapterListener != null) {
       iRecyclerAdapterListener.onBindViewHolder(viewHolder, i);
     }
@@ -240,7 +252,6 @@ public class RecyclerViewBaseAdapter<T extends ListBaseViewHolder> extends Recyc
 
   @Override
   public int getItemViewType(int position) {
-    //        WXLogUtils.d(TAG, "getItemViewType position:"+position);
     if (iRecyclerAdapterListener != null) {
       return iRecyclerAdapterListener.getItemViewType(position);
     }
@@ -262,7 +273,6 @@ public class RecyclerViewBaseAdapter<T extends ListBaseViewHolder> extends Recyc
 
   @Override
   public void onViewRecycled(T holder) {
-    //        WXLogUtils.d(TAG, "onViewRecycled position ");
     if (iRecyclerAdapterListener != null) {
       iRecyclerAdapterListener.onViewRecycled(holder);
     }
@@ -271,7 +281,6 @@ public class RecyclerViewBaseAdapter<T extends ListBaseViewHolder> extends Recyc
 
   @Override
   public boolean onFailedToRecycleView(T holder) {
-    //        WXLogUtils.d(TAG, "onFailedToRecycleView ");
     if (iRecyclerAdapterListener != null) {
       return iRecyclerAdapterListener.onFailedToRecycleView(holder);
     }

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/WXRecyclerViewOnScrollListener.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/WXRecyclerViewOnScrollListener.java b/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/WXRecyclerViewOnScrollListener.java
index e9e0eb8..1cc3dbe 100755
--- a/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/WXRecyclerViewOnScrollListener.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/view/listview/adapter/WXRecyclerViewOnScrollListener.java
@@ -225,17 +225,27 @@ public class WXRecyclerViewOnScrollListener extends RecyclerView.OnScrollListene
   /**
    * The last position
    */
-  private int[] lastPositions;
+  private int[] mLastPositions;
+  /**
+   * The first position
+   */
+  private int[] mFirstPositions;
+
+
+  /**
+   * The location of last visible item
+   */
+  private int mLastVisibleItemPosition;
 
   /**
    * The location of last visible item
    */
-  private int lastVisibleItemPosition;
+  private int mFirstVisibleItemPosition;
 
   /**
    * The state of scroll status
    */
-  private int currentScrollState = 0;
+  private int mCurrentScrollState = 0;
 
   private WeakReference<IOnLoadMoreListener> listener;
 
@@ -246,14 +256,14 @@ public class WXRecyclerViewOnScrollListener extends RecyclerView.OnScrollListene
   @Override
   public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
     super.onScrollStateChanged(recyclerView, newState);
-    currentScrollState = newState;
+    mCurrentScrollState = newState;
     RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
     int visibleItemCount = layoutManager.getChildCount();
     int totalItemCount = layoutManager.getItemCount();
 
     if (visibleItemCount != 0) {
-      int bottomOffset = (totalItemCount - lastVisibleItemPosition - 1) * (recyclerView.getHeight()) / visibleItemCount;
-      if (visibleItemCount > 0 && currentScrollState == RecyclerView.SCROLL_STATE_IDLE) {
+      int bottomOffset = (totalItemCount - mLastVisibleItemPosition - 1) * (recyclerView.getHeight()) / visibleItemCount;
+      if (visibleItemCount > 0 && mCurrentScrollState == RecyclerView.SCROLL_STATE_IDLE) {
         if (listener != null && listener.get() != null) {
           listener.get().onLoadMore(bottomOffset);
         }
@@ -266,46 +276,49 @@ public class WXRecyclerViewOnScrollListener extends RecyclerView.OnScrollListene
     super.onScrolled(recyclerView, dx, dy);
     RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
     IOnLoadMoreListener l;
-    if((l = listener.get()) != null){
-      l.onBeforeScroll(dx,dy);
+    if ((l = listener.get()) != null) {
+      l.onBeforeScroll(dx, dy);
     }
 
     //  int lastVisibleItemPosition = -1;
-    if (layoutManagerType == null) {
-      if (layoutManager instanceof LinearLayoutManager) {
-        layoutManagerType = LAYOUT_MANAGER_TYPE.LINEAR;
-      } else if (layoutManager instanceof GridLayoutManager) {
-        layoutManagerType = LAYOUT_MANAGER_TYPE.GRID;
-      } else if (layoutManager instanceof StaggeredGridLayoutManager) {
-        layoutManagerType = LAYOUT_MANAGER_TYPE.STAGGERED_GRID;
-      } else {
-        throw new RuntimeException(
-            "Unsupported LayoutManager used. Valid ones are LinearLayoutManager, GridLayoutManager and StaggeredGridLayoutManager");
-      }
-    }
+    if (layoutManager instanceof LinearLayoutManager) {
+      layoutManagerType = LAYOUT_MANAGER_TYPE.LINEAR;
+      mLastVisibleItemPosition = ((LinearLayoutManager) layoutManager).findLastVisibleItemPosition();
+      listener.get().notifyAppearStateChange(((LinearLayoutManager) layoutManager).findFirstVisibleItemPosition()
+              , mLastVisibleItemPosition
+              , dx
+              , dy);
+    } else if (layoutManager instanceof GridLayoutManager) {
+      layoutManagerType = LAYOUT_MANAGER_TYPE.GRID;
+      GridLayoutManager gridLayoutManager = ((GridLayoutManager) layoutManager);
+      mLastVisibleItemPosition = gridLayoutManager.findLastVisibleItemPosition();
+      listener.get().notifyAppearStateChange(((GridLayoutManager) layoutManager).findFirstVisibleItemPosition()
+              , mLastVisibleItemPosition
+              , dx
+              , dy);
 
-    switch (layoutManagerType) {
-      case LINEAR:
-        lastVisibleItemPosition = ((LinearLayoutManager) layoutManager)
-            .findLastVisibleItemPosition();
-        listener.get().notifyAppearStateChange(((LinearLayoutManager) layoutManager).findFirstVisibleItemPosition()
-            ,lastVisibleItemPosition
-            ,dx
-            ,dy);
-        break;
-      case GRID:
-        lastVisibleItemPosition = ((GridLayoutManager) layoutManager)
-            .findLastVisibleItemPosition();
-        break;
-      case STAGGERED_GRID:
-        StaggeredGridLayoutManager staggeredGridLayoutManager
-            = (StaggeredGridLayoutManager) layoutManager;
-        if (lastPositions == null) {
-          lastPositions = new int[staggeredGridLayoutManager.getSpanCount()];
-        }
-        staggeredGridLayoutManager.findLastVisibleItemPositions(lastPositions);
-        lastVisibleItemPosition = findMax(lastPositions);
-        break;
+    } else if (layoutManager instanceof StaggeredGridLayoutManager) {
+      layoutManagerType = LAYOUT_MANAGER_TYPE.STAGGERED_GRID;
+      StaggeredGridLayoutManager staggeredGridLayoutManager = (StaggeredGridLayoutManager) layoutManager;
+      int newspanCount = staggeredGridLayoutManager.getSpanCount();
+      if (mLastPositions == null || newspanCount != mLastPositions.length ) {
+        mLastPositions = new int[newspanCount];
+      }
+      if (mFirstPositions == null || newspanCount != mFirstPositions.length) {
+        mFirstPositions = new int[newspanCount];
+      }
+      staggeredGridLayoutManager.findFirstVisibleItemPositions(mFirstPositions);
+      mFirstVisibleItemPosition = findMin(mFirstPositions);
+      staggeredGridLayoutManager.findLastVisibleItemPositions(mLastPositions);
+      mLastVisibleItemPosition = findMax(mLastPositions);
+      listener.get().notifyAppearStateChange(
+              mFirstVisibleItemPosition
+              , mLastVisibleItemPosition
+              , dx
+              , dy);
+    } else {
+      throw new RuntimeException(
+              "Unsupported LayoutManager used. Valid ones are LinearLayoutManager, GridLayoutManager and StaggeredGridLayoutManager");
     }
   }
 
@@ -319,6 +332,16 @@ public class WXRecyclerViewOnScrollListener extends RecyclerView.OnScrollListene
     return max;
   }
 
+  private int findMin(int[] firstPositions) {
+    int min = firstPositions[0];
+    for (int value : firstPositions) {
+      if (value < min) {
+        min = value;
+      }
+    }
+    return min;
+  }
+
   public enum LAYOUT_MANAGER_TYPE {
     LINEAR,
     GRID,

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BaseBounceView.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BaseBounceView.java b/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BaseBounceView.java
index 1809a78..e6054bf 100644
--- a/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BaseBounceView.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BaseBounceView.java
@@ -230,23 +230,22 @@ public abstract class BaseBounceView<T extends View> extends FrameLayout {
 
     private int mOrientation = OrientationHelper.VERTICAL;
     protected WXSwipeLayout swipeLayout;
-    private T innerView;
+    private T mInnerView;
 
     public BaseBounceView(Context context,int orientation) {
         this(context, null,orientation);
     }
 
-    public BaseBounceView(Context context, AttributeSet attrs,int orientataion) {
+    public BaseBounceView(Context context, AttributeSet attrs,int orientation) {
         super(context, attrs);
-        mOrientation = orientataion;
-        init(context);
+        mOrientation = orientation;
     }
 
     public int getOrientation(){
         return mOrientation;
     }
 
-    private void init(Context context) {
+    public void init(Context context) {
         createBounceView(context);
     }
 
@@ -275,15 +274,15 @@ public abstract class BaseBounceView<T extends View> extends FrameLayout {
     }
 
     /**
-     * Init Swipelayout
+     * Init wipelayout
      */
     private WXSwipeLayout createBounceView(Context context) {
         swipeLayout = new WXSwipeLayout(context);
         swipeLayout.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
-        innerView = setInnerView(context);
-        if (innerView == null)
+        mInnerView = setInnerView(context);
+        if (mInnerView == null)
             return null;
-        swipeLayout.addView(innerView, new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
+        swipeLayout.addView(mInnerView, new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
         addView(swipeLayout, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
         return swipeLayout;
     }
@@ -292,7 +291,7 @@ public abstract class BaseBounceView<T extends View> extends FrameLayout {
      * @return the child of swipelayout : recyclerview or scrollview
      */
     public T getInnerView() {
-        return innerView;
+        return mInnerView;
     }
 
     public abstract T setInnerView(Context context);

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BounceRecyclerView.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BounceRecyclerView.java b/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BounceRecyclerView.java
index 2d81b37..abbdf0d 100644
--- a/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BounceRecyclerView.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BounceRecyclerView.java
@@ -206,8 +206,6 @@ package com.taobao.weex.ui.view.refresh.wrapper;
 
 import android.content.Context;
 import android.support.annotation.Nullable;
-import android.support.v7.widget.OrientationHelper;
-import android.util.AttributeSet;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.ViewGroup;
@@ -223,24 +221,33 @@ import com.taobao.weex.ui.view.listview.adapter.RecyclerViewBaseAdapter;
 
 import java.util.Stack;
 
+
 public class BounceRecyclerView extends BaseBounceView<WXRecyclerView> implements ListComponentView,WXGestureObservable {
 
   private RecyclerViewBaseAdapter adapter = null;
   private Stack<View> headerViewStack = new Stack<>();
   private Stack<WXCell> headComponentStack = new Stack<>();
   private WXGesture mGesture;
+  private int mLayoutType = WXRecyclerView.TYPE_LINEAR_LAYOUT;
+  private int mColumnCount = 1;
+  private float mColumnGap = 1;
 
   @Override
   public boolean postDelayed(Runnable action, long delayMillis) {
     return super.postDelayed(WXThread.secure(action), delayMillis);
   }
 
-  public BounceRecyclerView(Context context, int orientation) {
+  public BounceRecyclerView(Context context,int type,int columnCount,float columnGap,int orientation) {
     super(context, orientation);
+    mLayoutType = type;
+    mColumnCount = columnCount;
+    mColumnGap = columnGap;
+    init(context);
   }
-
-  public BounceRecyclerView(Context context, AttributeSet attrs) {
-    super(context, attrs, OrientationHelper.VERTICAL);
+  public BounceRecyclerView(Context context,int type,int orientation) {
+    super(context, orientation);
+    mLayoutType = type;
+    init(context);
   }
 
   public void setRecyclerViewBaseAdapter(RecyclerViewBaseAdapter adapter) {
@@ -262,11 +269,11 @@ public class BounceRecyclerView extends BaseBounceView<WXRecyclerView> implement
     }
     return result;
   }
-    
+
   @Override
   public WXRecyclerView setInnerView(Context context) {
     WXRecyclerView wxRecyclerView = new WXRecyclerView(context);
-    wxRecyclerView.initView(context, WXRecyclerView.TYPE_LINEAR_LAYOUT, getOrientation());
+    wxRecyclerView.initView(context, mLayoutType,mColumnCount,mColumnGap,getOrientation());
     return wxRecyclerView;
   }
 

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BounceScrollerView.java
----------------------------------------------------------------------
diff --git a/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BounceScrollerView.java b/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BounceScrollerView.java
index cc30556..7d8a990 100644
--- a/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BounceScrollerView.java
+++ b/android/sdk/src/main/java/com/taobao/weex/ui/view/refresh/wrapper/BounceScrollerView.java
@@ -219,6 +219,7 @@ public class BounceScrollerView extends BaseBounceView<WXScrollView> {
 
     public BounceScrollerView(Context context, int orientation, WXScroller waScroller) {
         super(context,orientation);
+        init(context);
         if (getInnerView() != null)
             getInnerView().setWAScroller(waScroller);
     }

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/examples/vue/components/waterfall.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/waterfall.vue b/examples/vue/components/waterfall.vue
new file mode 100644
index 0000000..7bf42f9
--- /dev/null
+++ b/examples/vue/components/waterfall.vue
@@ -0,0 +1,455 @@
+<template>
+  <waterfall class="page"
+  v-bind:style="{padding:padding}"
+  :column-width="columnWidth" :column-count="columnCount" :column-gap="columnGap"
+  :show-scrollbar="showScrollbar" :scrollable="scrollable"
+  @scroll="recylerScroll"
+  >
+    <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
+      <loading-indicator class="indicator"></loading-indicator>
+      <text class="refreshText">{{refreshText}}</text>
+    </refresh>
+    <header class="header" ref="header" v-if="showHeader">
+      <image class="banner" src="https://gw.alicdn.com/tps/TB1ESN1PFXXXXX1apXXXXXXXXXX-1000-600.jpg" resize="cover">
+        <div class="bannerInfo">
+          <image class="avatar" src="https://gw.alicdn.com/tps/TB1EP9bPFXXXXbpXVXXXXXXXXXX-150-110.jpg" resize="cover"></image>
+          <text class="name">Adam Cat</text>
+          <div class="titleWrap">
+            <text class="title">Genius</text>
+          </div>
+        </div>
+        <div class="bannerPhotoWrap">
+          <image class="bannerPhoto" v-for="photo in banner.photos" :src="photo.src"></image>
+        </div>
+      </image>
+    </header>
+    <header class="stickyHeader" @click="showOrRemoveHeader">
+      <div v-if="stickyHeaderType === 'none'" class="stickyWrapper">
+        <text class="stickyText">Sticky Header</text>
+      </div>
+      <div v-if="stickyHeaderType === 'appear'" class="stickyWrapper">
+        <div class="stickyTextImageWrapper">
+          <text class="stickyText">Last Appear:</text>
+          <image class="stickyImage" :src="appearImage"></image>
+        </div>
+        <div class="stickyTextImageWrapper">
+          <text class="stickyText">Last Disappear:</text>
+          <image class="stickyImage" :src="disappearImage"></image>
+        </div>
+      </div>
+      <div v-if="stickyHeaderType === 'scroll'" class="stickyWrapper">
+        <text class="stickyText">Content Offset:{{contentOffset}}</text>
+      </div>
+    </header>
+    <cell v-for="(item, index) in items" :key="item.src" class="cell">
+      <div class="item" @click="onItemclick(item.behaviour, index)" @appear="itemAppear(item.src)" @disappear="itemDisappear(item.src)">
+        <text v-if="item.name" class="itemName">{{item.name}}</text>
+        <image class="itemPhoto" :src="item.src"></image>
+        <text v-if="item.desc" class="itemDesc">{{item.desc}}</text>
+        <text v-if="item.behaviourName" class="itemClickBehaviour"> {{item.behaviourName}}</text>
+      </div>
+    </cell>
+    <div class="fixedItem" @click="scrollToTop">
+      <text class="fixedText">Top</text>
+    </div>
+  </waterfall>
+</template>
+
+<style>
+  .page {
+    background-color: #EFEFEF;
+  }
+  .refresh {
+    height: 128;
+    width: 750;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+  .refreshText {
+    color: #888888;
+    font-weight: bold;
+  }
+  .indicator {
+    color: #888888;
+    height: 40;
+    width: 40;
+    margin-right: 30;
+  }
+  .header {
+  }
+  .banner {
+    height: 377;
+    flex-direction: row;
+  }
+  .bannerInfo {
+    width:270;
+    align-items: center;
+    justify-content: center;
+  }
+  .avatar {
+    width: 148;
+    height: 108;
+    border-radius: 54;
+    border-width: 4;
+    border-color: #FFFFFF;
+    margin-bottom: 14;
+  }
+  .name {
+    font-weight: bold;
+    font-size:32;
+    color:#ffffff;
+    line-height:32;
+    text-align:center;
+    margin-bottom: 16;
+  }
+  .titleWrap {
+    width: 100;
+    height: 24;
+    margin-bottom: 10;
+    background-color: rgba(255,255,255,0.80);
+    border-radius: 12;
+    justify-content: center;
+    align-items: center;
+  }
+  .title {
+    font-size: 20;
+    color: #000000;
+  }
+  .bannerPhotoWrap {
+    width: 449;
+    height: 305;
+    background-color: #FFFFFF;
+    border-radius: 12;
+    margin-top: 35;
+    padding: 12;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap:wrap;
+  }
+  .bannerPhoto {
+    width: 137;
+    height: 137;
+    margin-bottom: 6;
+  }
+  .stickyHeader {
+    position: sticky;
+    height: 94;
+    flex-direction: row;
+    padding-bottom:6;
+  }
+  .stickyWrapper {
+    flex-direction: row;
+    background-color:#00cc99;
+    justify-content: center;
+    align-items: center;
+    flex:1;
+  }
+  .stickyTextImageWrapper {
+    flex:1;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+  }
+  .stickyText {
+    color: #FFFFFF;
+    font-weight: bold;
+    font-size:32;
+    margin-right: 12;
+  }
+  .stickyImage {
+    width: 64;
+    height: 64;
+    border-radius: 32;
+  }
+
+  .cell {
+    padding-top: 6;
+    padding-bottom: 6;
+  }
+  .item {
+    background-color: #FFFFFF;
+    align-items: center;
+  }
+  .itemName {
+    font-size:28;
+    color:#333333;
+    line-height:42;
+    text-align:left;
+    margin-top: 24;
+  }
+  .itemPhoto {
+    margin-top: 18;
+    width: 220;
+    height: 220;
+    margin-bottom: 18;
+  }
+  .itemDesc {
+    font-size:24;
+    margin:12;
+    color:#999999;
+    line-height:36;
+    text-align:left;
+  }
+  .itemClickBehaviour {
+    font-size:36;
+    color:#00cc99;
+    line-height:36;
+    text-align:center;
+    margin-top: 6;
+    margin-left: 24;
+    margin-right: 24;
+    margin-bottom: 30;
+  }
+
+  .fixedItem {
+    position: fixed;
+    width:78;
+    height:78;
+    background-color:#00cc99;
+    right: 32;
+    bottom: 32;
+    border-radius: 39;
+    align-items: center;
+    justify-content: center;
+  }
+  .fixedText {
+    font-size: 36;
+    color: white;
+    line-height: 36;
+  }
+
+</style>
+
+<script>
+  export default {
+    data: function() {
+      const items = [
+        {
+          src:'https://gw.alicdn.com/tps/TB1Jl1CPFXXXXcJXXXXXXXXXXXX-370-370.jpg',
+          name: 'Thomas Carlyle',
+          desc:'Genius only means hard-working all one\'s life',
+          behaviourName: 'Change count',
+          behaviour: 'changeColumnCount'
+        },
+        {
+          src:'https://gw.alicdn.com/tps/TB1Hv1JPFXXXXa3XXXXXXXXXXXX-370-370.jpg',
+          desc:'The man who has made up his mind to win will never say "impossible "',
+          behaviourName: 'Change gap',
+          behaviour: 'changeColumnGap'
+        },
+        {
+          src:'https://gw.alicdn.com/tps/TB1eNKuPFXXXXc_XpXXXXXXXXXX-370-370.jpg',
+          desc:'There is no such thing as a great talent without great will - power',
+          behaviourName: 'Show scrollbar',
+          behaviour: 'showScrollbar',
+        },
+        {
+          src:'https://gw.alicdn.com/tps/TB1DCh8PFXXXXX7aXXXXXXXXXXX-370-370.jpg',
+          name:'Addison',
+          desc:'Cease to struggle and you cease to live',
+          behaviourName: 'Change width',
+          behaviour: 'changeColumnWidth',
+        },
+        {
+          src:'https://gw.alicdn.com/tps/TB1ACygPFXXXXXwXVXXXXXXXXXX-370-370.jpg',
+          desc:'A strong man will struggle with the storms of fate',
+          behaviourName: 'Listen appear',
+          behaviour: 'listenAppear',
+        },
+        {
+          src:'https://gw.alicdn.com/tps/TB1IGShPFXXXXaqXVXXXXXXXXXX-370-370.jpg',
+          name:'Ruskin',
+          desc:'Living without an aim is like sailing without a compass',
+          behaviourName: 'Set scrollable',
+          behaviour: 'setScrollable',
+        },
+        {
+          src:'https://gw.alicdn.com/tps/TB1xU93PFXXXXXHaXXXXXXXXXXX-240-240.jpg',
+          behaviourName: 'waterfall padding',
+          behaviour: 'setPadding',
+        },
+        {
+          src:'https://gw.alicdn.com/tps/TB19hu0PFXXXXaXaXXXXXXXXXXX-240-240.jpg',
+          name:'Balzac',
+          desc:'There is no such thing as a great talent without great will - power',
+          behaviourName: 'listen scroll',
+          behaviour: 'listenScroll',
+        },
+        {
+          src:'https://gw.alicdn.com/tps/TB1ux2vPFXXXXbkXXXXXXXXXXXX-240-240.jpg',
+          behaviourName: 'Remove cell',
+          behaviour: 'removeCell',
+        },
+        {
+          src:'https://gw.alicdn.com/tps/TB1tCCWPFXXXXa7aXXXXXXXXXXX-240-240.jpg',
+          behaviourName: 'Move cell',
+          behaviour: 'moveCell',
+        }
+      ]
+
+      let repeatItems = [];
+      for (let i = 0; i < 3; i++) {
+        repeatItems.push(...items)
+      }
+
+      return {
+        padding: 0,
+        refreshing: false,
+        refreshText: '\u2193   pull to refresh...',
+        columnCount: 2,
+        columnGap: 12,
+        columnWidth: 'auto',
+        contentOffset: '0',
+        showHeader: true,
+        showScrollbar: false,
+        scrollable: true,
+        showStickyHeader: false,
+        appearImage: null,
+        disappearImage: null,
+        stickyHeaderType: 'none',
+        banner: {
+          photos: [
+            {src:'https://gw.alicdn.com/tps/TB1JyaCPFXXXXc9XXXXXXXXXXXX-140-140.jpg'},
+            {src:'https://gw.alicdn.com/tps/TB1MwSFPFXXXXbdXXXXXXXXXXXX-140-140.jpg'},
+            {src:'https://gw.alicdn.com/tps/TB1U8avPFXXXXaDXpXXXXXXXXXX-140-140.jpg'},
+            {src:'https://gw.alicdn.com/tps/TB17Xh8PFXXXXbkaXXXXXXXXXXX-140-140.jpg'},
+            {src:'https://gw.alicdn.com/tps/TB1cTmLPFXXXXXRXXXXXXXXXXXX-140-140.jpg'},
+            {src:'https://gw.alicdn.com/tps/TB1oCefPFXXXXbVXVXXXXXXXXXX-140-140.jpg'}
+          ]
+        },
+        items: repeatItems
+      }
+    },
+
+    methods: {
+      recylerScroll: function(e) {
+        this.contentOffset = e.contentOffset.y
+      },
+      showOrRemoveHeader: function() {
+        this.showHeader = !this.showHeader
+      },
+      onItemclick: function (behaviour, index) {
+        console.log(`click...${behaviour} at index ${index}`)
+        switch (behaviour) {
+          case 'changeColumnCount':
+            this.changeColumnCount()
+            break
+          case 'changeColumnGap':
+            this.changeColumnGap()
+            break
+          case 'changeColumnWidth':
+            this.changeColumnWidth()
+            break
+          case 'showScrollbar':
+            this.showOrHideScrollbar()
+            break
+          case 'listenAppear':
+            this.listenAppearAndDisappear()
+            break
+          case 'setScrollable':
+            this.setScrollable()
+            break
+          case 'setPadding':
+            this.setRecyclerPadding()
+            break
+          case 'listenScroll':
+            this.listenScrollEvent()
+            break
+          case 'removeCell':
+            this.removeCell(index)
+            break
+          case 'moveCell':
+            this.moveCell(index)
+            break
+        }
+      },
+
+      itemAppear: function(src) {
+        this.appearImage = src;
+      },
+
+      itemDisappear: function(src) {
+        this.disappearImage = src;
+      },
+
+      changeColumnCount: function() {
+        if (this.columnCount === 2) {
+          this.columnCount = 3
+        } else {
+          this.columnCount = 2
+        }
+      },
+
+      changeColumnGap: function() {
+        if (this.columnGap === 12) {
+          this.columnGap = 'normal'
+        } else {
+          this.columnGap = 12
+        }
+      },
+
+      changeColumnWidth: function() {
+        if (this.columnWidth === 'auto') {
+          this.columnWidth = 600
+        } else {
+          this.columnWidth = 'auto'
+        }
+      },
+
+      showOrHideScrollbar: function() {
+        this.showScrollbar = !this.showScrollbar
+      },
+
+      setScrollable: function() {
+        this.scrollable = !this.scrollable
+      },
+
+      listenAppearAndDisappear: function() {
+        this.stickyHeaderType = (this.stickyHeaderType === 'appear' ? 'none' : 'appear')
+      },
+
+      listenScrollEvent: function() {
+        this.stickyHeaderType = (this.stickyHeaderType === 'scroll' ? 'none' : 'scroll')
+      },
+
+      scrollToTop: function() {
+        weex.requireModule('dom').scrollToElement(this.$refs.header)
+      },
+
+      setRecyclerPadding: function() {
+        this.padding = (this.padding == 0 ? 12 : 0);
+      },
+
+      removeCell: function(index) {
+        this.items.splice(index, 1)
+      },
+
+      moveCell: function(index) {
+        if (index == 0) {
+          this.items.splice(this.items.length - 1, 0, this.items.splice(index, 1)[0]);
+        } else {
+          this.items.splice(0, 0, this.items.splice(index, 1)[0]);
+        }
+      },
+
+      onrefresh (event) {
+        this.refreshing = true
+        this.refreshText = "loading..."
+        setTimeout(() => {
+          this.refreshing = false
+          this.refreshText = '\u2193   pull to refresh...'
+        }, 2000)
+      },
+
+      onpullingdown (event) {
+        // console.log(`${event.pullingDistance}`)
+        if (event.pullingDistance < -64) {
+          this.refreshText = '\u2191   release to refresh...'
+        } else {
+          this.refreshText = '\u2193   pull to refresh...'
+        }
+      }
+    }
+  }
+</script>

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/examples/vue/index.vue
----------------------------------------------------------------------
diff --git a/examples/vue/index.vue b/examples/vue/index.vue
index 80af3b8..dffc5f3 100644
--- a/examples/vue/index.vue
+++ b/examples/vue/index.vue
@@ -19,6 +19,7 @@
           {name: root + '/components/input', title: 'Input'},
           {name: root + '/components/scroller', title: 'Scroller'},
           {name: root + '/components/list', title: 'List'},
+          {name: root + '/components/waterfall', title: 'Waterfall'},
           {name: root + '/components/slider', title: 'Slider'},
           {name: root + '/components/a', title: 'A'},
           {name: root + '/components/video', title: 'Video'},

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/ios/playground/WeexDemo/DemoDefine.h
----------------------------------------------------------------------
diff --git a/ios/playground/WeexDemo/DemoDefine.h b/ios/playground/WeexDemo/DemoDefine.h
index 478ecb5..fe07a7b 100644
--- a/ios/playground/WeexDemo/DemoDefine.h
+++ b/ios/playground/WeexDemo/DemoDefine.h
@@ -18,7 +18,7 @@
 
 #define DEMO_URL(path) [NSString stringWithFormat:@"http://%@:12580/%s", DEMO_HOST, #path]
 
-#define HOME_URL [NSString stringWithFormat:@"http://%@:12580/examples/build/index.js", DEMO_HOST]
+#define HOME_URL [NSString stringWithFormat:@"http://%@:12580/examples/build/vue/index.js", DEMO_HOST]
 
 #define BUNDLE_URL [NSString stringWithFormat:@"file://%@/bundlejs/index.js",[NSBundle mainBundle].bundlePath]
 

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/ios/playground/WeexDemo/UIView+UIThreadCheck.m
----------------------------------------------------------------------
diff --git a/ios/playground/WeexDemo/UIView+UIThreadCheck.m b/ios/playground/WeexDemo/UIView+UIThreadCheck.m
index e499f53..579eab9 100644
--- a/ios/playground/WeexDemo/UIView+UIThreadCheck.m
+++ b/ios/playground/WeexDemo/UIView+UIThreadCheck.m
@@ -10,7 +10,7 @@
 #import <WeexSDK/NSObject+WXSwizzle.h>
 
 #define WXCheckUIThread() NSAssert([NSThread isMainThread], \
-@"You can not change UI on main thread!")
+@"You must change UI on main thread!")
 
 @implementation UIView (UIThreadCheck)
 

http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/c6fddbea/ios/playground/WeexDemo/WXDemoViewController.m
----------------------------------------------------------------------
diff --git a/ios/playground/WeexDemo/WXDemoViewController.m b/ios/playground/WeexDemo/WXDemoViewController.m
index d354078..f962df0 100644
--- a/ios/playground/WeexDemo/WXDemoViewController.m
+++ b/ios/playground/WeexDemo/WXDemoViewController.m
@@ -94,7 +94,8 @@
 - (void)dealloc
 {
     [_instance destroyInstance];
-#if DEBUG
+    
+#ifdef DEBUG
     [_instance forceGarbageCollection];
 #endif