diff --git a/CHINESE-README.md b/CHINESE-README.md
index 805f5de..59de13f 100644
--- a/CHINESE-README.md
+++ b/CHINESE-README.md
@@ -31,6 +31,40 @@ npm run dev
  npm i vue-waterfall2@latest --save
 ```
 
+## <waterfall> 属性
+Name | Default | Type | Desc
+-------- | -------- | -------- | --------
+height | 100% | String | 容器高度
+col | 2  | Number |  列数
+width | - | Number | 宽度
+gutterWidth | 10 | Number | 间隔的宽度
+data | [] | Array | 数据
+isTransition | true | Boolean | 加载图片是否使用过渡动画
+lazyDistance | 300 | Number | 触发图片懒加载的距离 
+loadDistance | 300 | Number | 触发上拉加载更多的距离
+  
+## 懒加载
+对于需要使用懒加载的图片，需要使用`lazy-src`属性
+```html
+<waterfall :col='col'   :data="data"     >
+  <template>
+     <img v-if="item.img" :lazy-src="item.img" alt="加载错误"  />
+  </template>
+</waterfall>
+```
+
+## <waterfall> Events
+Name | Data |   Desc
+-------- | --- | -------- 
+loadmore | - | 滚动到底部触发
+scroll | obj | 获取滚动时的event对象
+finish | - | 完成元素渲染
+  
+## $waterfall API
+```
+this.$waterfall.forceUpdate()   //forceUpdate
+```
+
 ## Usage
 注意:
  1.  `gutterWidth`需要与`width`一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值)</font>
@@ -40,7 +74,7 @@ npm run dev
 import waterfall from 'vue-waterfall2'
 Vue.use(waterfall)
 ```
-##### app.vue(此组件 style不使用 scoped)
+##### app.vue
 ```javascript
 <template>
   <div class="container-water-fall">
@@ -105,34 +139,3 @@ import Vue from 'vue'
 	    }
 	}
 ```
-## <waterfall> 属性
-Name | Default | Type | Desc
--------- | -------- | -------- | --------
-col | 2  | Number |  列数
-width | null | Number | 宽度
-gutterWidth | 10 | Number | 间隔的宽度
-data | [] | Array | 数据
-isTransition | true | Boolean | 加载图片是否使用过渡动画
-lazyDistance | 300 | Number | 触发图片懒加载的距离 
-loadDistance | 300 | Number | 触发上拉加载更多的距离
-  
-## 懒加载
-对于需要使用懒加载的图片，需要使用`lazy-src`属性
-```html
-<waterfall :col='col'   :data="data"     >
-  <template>
-     <img v-if="item.img" :lazy-src="item.img" alt="加载错误"  />
-  </template>
-</waterfall>
-```
-
-## <waterfall> Events
-Name | Data |   Desc
--------- | --- | -------- 
-loadmore | null | 滚动到底部触发
-scroll | obj | 获取滚动时的event对象
-  
-## $waterfall API
-```
-this.$waterfall.forceUpdate()   //forceUpdate
-```
diff --git a/README.md b/README.md
index 2b4325d..6c80f92 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,39 @@ npm run dev
  npm i vue-waterfall2@latest --save
 ```
 
+## <waterfall> Props
+Name | Default | Type | Desc
+-------- | -------- | -------- | --------
+col | 2  | Number |  the number of column
+width | null | Number | the value of width 
+gutterWidth | 10 | Number | the value of margin
+data | [] | Array | data
+isTransition | true | Boolean | load image with transition
+lazyDistance | 300 | Number | the distance of image lazy loading
+loadDistance | 300 | Number | the distance of loadmore
+  
+## Lazy Load
+For images that need to be loaded lazily, the 'lazy-src' attribute needs to be used
+```html
+<waterfall :col='col'   :data="data"     >
+  <template>
+     <img v-if="item.img" :lazy-src="item.img" alt="load error"  />
+  </template>
+</waterfall>
+```
+
+## <waterfall> Events
+Name | Data |   Desc
+-------- | --- | -------- 
+loadmore | - | Scroll to the bottom to trigger on PC /  pull up to trigger on Mobile  
+scroll | obj | Scroll to trigger and get the infomation of scroll
+finish | - | finish render
+  
+## $waterfall API
+```
+this.$waterfall.forceUpdate()   //forceUpdate
+```
+
 ## Usage
 Notes:
   1. attribute `gutterWidth` needs to be used together with `width` to be effective, otherwise it will be adaptive width (when using `rem` to layout, calculate the width after adaptation before passing the value).
@@ -43,7 +76,7 @@ Notes:
 import waterfall from 'vue-waterfall2'
 Vue.use(waterfall)
 ```
-##### app.vue(Scoped is not used for this component style)
+##### app.vue
 ```javascript
 <template>
   <div class="container-water-fall">
@@ -107,34 +140,3 @@ import Vue from 'vue'
 	    }
 	}
 ```
-## <waterfall> Props
-Name | Default | Type | Desc
--------- | -------- | -------- | --------
-col | 2  | Number |  the number of column
-width | null | Number | the value of width 
-gutterWidth | 10 | Number | the value of margin
-data | [] | Array | data
-isTransition | true | Boolean | load image with transition
-lazyDistance | 300 | Number | the distance of image lazy loading
-loadDistance | 300 | Number | the distance of loadmore
-  
-## Lazy Load
-For images that need to be loaded lazily, the 'lazy-src' attribute needs to be used
-```html
-<waterfall :col='col'   :data="data"     >
-  <template>
-     <img v-if="item.img" :lazy-src="item.img" alt="load error"  />
-  </template>
-</waterfall>
-```
-
-## <waterfall> Events
-Name | Data |   Desc
--------- | --- | -------- 
-loadmore | null | Scroll to the bottom to trigger on PC /  pull up to trigger on Mobile  
-scroll | obj | Scroll to trigger and get the infomation of scroll
-  
-## $waterfall API
-```
-this.$waterfall.forceUpdate()   //forceUpdate
-```
diff --git a/package-lock.json b/package-lock.json
index 49cec4a..d40e414 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5605,9 +5605,9 @@
       }
     },
     "mixin-deep": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
-      "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
       "dev": true,
       "requires": {
         "for-in": "^1.0.2",
@@ -10278,6 +10278,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-waterfall": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/vue-waterfall/-/vue-waterfall-1.0.6.tgz",
+      "integrity": "sha1-ADJKj5f0Sb9vjN67SXS2DP+snu0="
+    },
     "vue-waterfall2": {
       "version": "1.8.20",
       "resolved": "https://registry.npmjs.org/vue-waterfall2/-/vue-waterfall2-1.8.20.tgz",