From 789b058ffa897df30610e23a0a5cbd5ba22a79e3 Mon Sep 17 00:00:00 2001
From: awesomedevin <awesomedevin@163.com>
Date: Mon, 5 Sep 2022 18:53:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8A=A0=E8=BD=BD=E6=9B=B4=E5=A4=9A?=
 =?UTF-8?q?=E5=88=A4=E6=96=AD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHINESE-README.md               |   2 +-
 lib/waterfall.vue               | 875 ++++++++++++++++----------------
 package.json                    |  11 +-
 src/App.vue                     |  20 +-
 src/components/HelloWorld.vue   | 399 ++++++++-------
 src/components/evaluateList.vue | 404 ++++++++-------
 src/main.js                     |  20 +-
 src/router/index.js             |  23 +-
 yarn.lock                       |   8 +-
 9 files changed, 939 insertions(+), 823 deletions(-)

diff --git a/CHINESE-README.md b/CHINESE-README.md
index 4fc8b2c..cc311a6 100644
--- a/CHINESE-README.md
+++ b/CHINESE-README.md
@@ -34,7 +34,7 @@ npm run dev
 ## <waterfall> 属性
 Name | Default | Type | Desc | Necessary
 -------- | -------- | -------- | -------- | -------
-height | - | String | 容器高度(height为空监听的是window的滚动事件，不为空则监听容器滚动) | false
+height | - | String | 容器高度(height为空监听的是window的滚动事件，不为空则监听容器滚动，loadmore无法触发时，可尝试设置容器高度) | false
 col | 2  | Number |  列数 | false
 width | - | Number | 宽度 | false
 gutterWidth | 10 | Number | 间隔的宽度 | false
diff --git a/lib/waterfall.vue b/lib/waterfall.vue
index ed60a8b..42b1eb9 100644
--- a/lib/waterfall.vue
+++ b/lib/waterfall.vue
@@ -1,446 +1,461 @@
 <style>
-	.vue-waterfall{
-		width:100%;
-		overflow-y: auto;
-		position: relative;
-	}
-	.vue-waterfall .slot-box{
-		position: absolute;
-		top: 100%;
-		left: 100%;
-		width: 0;
-		height: 0;
-		overflow: hidden;
-	}
-	.vue-waterfall .vue-waterfall-column{
-		float: left;
-	}
-	.vue-waterfall.is-transition img{
-		opacity: 0;
-	}
-	.vue-waterfall.is-transition img.animation{
-		animation:0.4s  lazy-animation  linear;
-		animation-fill-mode: forwards;
-	}
+.vue-waterfall {
+  width: 100%;
+  overflow-y: auto;
+  position: relative;
+}
+.vue-waterfall .slot-box {
+  position: absolute;
+  top: 100%;
+  left: 100%;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+.vue-waterfall .vue-waterfall-column {
+  float: left;
+}
+.vue-waterfall.is-transition img {
+  opacity: 0;
+}
+.vue-waterfall.is-transition img.animation {
+  animation: 0.4s lazy-animation linear;
+  animation-fill-mode: forwards;
+}
 
-	 @keyframes lazy-animation{
-		from{
-			opacity: 0;
-		}
-		to{
-			opacity: 1;
-		}
-	}
+@keyframes lazy-animation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 </style>
 <template>
-	<div class="vue-waterfall" :style="{height:height}" ref="vueWaterfall" id="vueWaterfall" :class="isTransition&&'is-transition'" >
-		<div class="slot-box">
-			<slot ></slot>	
-		</div>
-	</div>
+  <div
+    class="vue-waterfall"
+    :style="{ height: height }"
+    ref="vueWaterfall"
+    id="vueWaterfall"
+    :class="isTransition && 'is-transition'"
+  >
+    <div class="slot-box">
+      <slot></slot>
+    </div>
+  </div>
 </template>
 
 <script>
 global.regeneratorRuntime = require("babel-runtime/regenerator");
-import bus from './bus'
+import bus from "./bus";
 
-	export default{
-		props:{
-			col:{
-				type:Number,
-				default:2
-			},
-			width:Number,
-			height:{
-				type:String
-				// default:'100vh',    取消height默认值
-			},
-			data:{
-				type:Array,
-				default:[]
-			},
-			gutterWidth:{
-				type:Number,
-				default:10
-			},
-			isTransition:{
-				type:Boolean,
-				default:true
-			},
-			lazyDistance:{
-				type:Number,
-				default:300
-			},
-			loadDistance:{
-				type:Number,
-				default:300
-			}
+export default {
+  props: {
+    col: {
+      type: Number,
+      default: 2,
+    },
+    width: Number,
+    height: {
+      type: String,
+      // default:'100vh',    取消height默认值
+    },
+    data: {
+      type: Array,
+      default: [],
+    },
+    gutterWidth: {
+      type: Number,
+      default: 10,
+    },
+    isTransition: {
+      type: Boolean,
+      default: true,
+    },
+    lazyDistance: {
+      type: Number,
+      default: 300,
+    },
+    loadDistance: {
+      type: Number,
+      default: 300,
+    },
+  },
+  data() {
+    return {
+      root: null,
+      columns: [],
+      loadmore: true,
+      timeout: null,
+      lazyTimeout: null,
+      lastScrollTop: 0,
+      timer: null,
+      loadedIndex: 0,
+      columnWidth: 0,
+      isresizing: false,
+      clientHeight:
+        document.documentElement.clientHeight || document.body.clientHeight,
+      clientWidth:
+        document.documentElement.clientWidth || document.body.clientWidth,
+    };
+  },
+  computed: {
+    trueLazyDistance() {
+      return (this.clientWidth / 375) * this.lazyDistance;
+    },
+    max() {
+      return (this.clientWidth / 375) * this.loadDistance;
+    },
+    viewHeight() {
+      return this.height ? this.root.offsetHeight : this.clientHeight;
+    },
+  },
+  watch: {
+    col(val) {
+      this.$nextTick(() => {
+        this.init();
+      });
+    },
+    data(newVal, oldVal) {
+      this.$nextTick(() => {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          if (this.isresizing) {
+            return;
+          }
+          if (newVal.length < this.loadedIndex) {
+            this.loadedIndex = 0;
+          }
+          if (
+            newVal.length > oldVal.length ||
+            newVal.length > this.loadedIndex
+          ) {
+            if (newVal.length === oldVal.length) {
+              this.resize(this.loadedIndex > 0 ? this.loadedIndex : null);
+              return;
+            }
+            this.resize(oldVal.length > 0 ? oldVal.length : null);
+          }
+        }, 300);
+      });
+    },
+  },
+  methods: {
+    init() {
+      //initialize
+      this.root = this.$refs.vueWaterfall;
+      this.clearColumn();
+      var col = parseInt(this.col);
+      for (var i = 0; i < col; i++) {
+        let odiv = document.createElement("div");
+        odiv.className = "vue-waterfall-column";
+        if (this.width) {
+          odiv.style.width = this.width + "px";
+          if (i != 0) {
+            odiv.style.marginLeft = this.gutterWidth + "px";
+          }
+          this.columnWidth = this.width;
+        } else {
+          odiv.style.width = 100 / parseInt(col) + "%";
+          this.columnWidth =
+            (100 / parseInt(col) / 100) * document.documentElement.clientWidth;
+        }
+        if (!this.root) {
+          this.root = this.$refs.vueWaterfall;
+        }
+        this.root && this.root.appendChild(odiv);
+        this.columns.push(odiv);
+      }
+      this.resize();
+    },
+    async __setDomImageHeight(dom) {
+      if (!dom.getElementsByTagName) {
+        return;
+      }
+      var imgs = dom.getElementsByTagName("img");
+      for (var i = 0; i < imgs.length; i++) {
+        var lazySrc = imgs[i].getAttribute("lazy-src");
+        console.log("lazySrc", lazySrc);
+        if (!imgs[i].getAttribute("src") && lazySrc) {
+          var newImg = new Image();
+          newImg.src = lazySrc;
+          if (newImg.complete) {
+            var trueWidth = imgs[i].offsetWidth || this.columnWidth;
+            var imgColumnHeight = (newImg.height * trueWidth) / newImg.width;
+            if (trueWidth) {
+              imgs[i].style.height = imgColumnHeight + "px";
+            }
+            console.log("imgs[i]", imgs[i], imgs[i].style);
+          } else {
+            await new Promise((resolve, reject) => {
+              newImg.onload = function () {
+                var trueWidth = imgs[i].offsetWidth || this.columnWidth;
+                var imgColumnHeight =
+                  (newImg.height * trueWidth) / newImg.width;
+                if (trueWidth) {
+                  imgs[i].style.height = imgColumnHeight + "px";
+                }
+                resolve();
+              };
+              newImg.onerror = function () {
+                resolve();
+              };
+            });
+          }
+        }
+      }
+    },
+    async append(dom) {
+      //append dom element
+      var self = this;
+      if (this.columns.length > 0) {
+        let min = this.columns[0];
+        for (var i = 1; i < this.columns.length; i++) {
+          if (
+            (await self.__getHeight(min)) >
+            (await self.__getHeight(self.columns[i]))
+          ) {
+            min = self.columns[i];
+          }
+        }
+        await this.__setDomImageHeight(dom);
+        min && min.appendChild(dom);
+      }
+    },
+    checkImg(dom) {
+      //check has image
+      if (!dom) {
+        return false;
+      }
+      if (dom.getElementsByTagName && dom.getElementsByTagName("img").length) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    async resize(index, elements) {
+      //resize and render
+      this.isresizing = true;
+      this.routeChanged = false; // 重置routeChanged
+      var self = this;
+      if (!this.$slots.default) {
+        this.isresizing = false;
+        return;
+      }
+      if (!index && index != 0 && !elements) {
+        elements = this.$slots.default;
+        this.loadedIndex = 0;
+        this.clear();
+      } else if (!elements) {
+        this.loadedIndex = index;
+        elements = this.$slots.default.splice(index);
+      }
 
-		},
-		data(){
-			return{
-				root:null,
-				columns:[],
-				loadmore:true,
-				timeout:null,
-				lazyTimeout:null,
-				lastScrollTop:0,
-				timer:null,
-				loadedIndex:0,
-				columnWidth:0,
-				isresizing:false,
-				clientHeight:document.documentElement.clientHeight || document.body.clientHeight,
-				clientWidth:document.documentElement.clientWidth || document.body.clientWidth,
-			}
-		},
-		computed:{
-			trueLazyDistance(){
-				return this.clientWidth/375*this.lazyDistance
-			},
-			max(){
-				return this.clientWidth/375*this.loadDistance
-			}
-		},
-		watch:{
-			col(val){
-				this.$nextTick(()=>{
-					this.init()
-				})
-			},
-			data(newVal,oldVal){
-				this.$nextTick(()=>{
-					clearTimeout(this.timer)
-					this.timer = setTimeout(()=>{
-						if(this.isresizing)
-						{
-							return
-						}
-						if(newVal.length<this.loadedIndex)
-						{
-							this.loadedIndex = 0
-						}
-						if(newVal.length>oldVal.length || newVal.length>this.loadedIndex)
-						{
-							if(newVal.length === oldVal.length)
-							{
-								this.resize(this.loadedIndex>0?this.loadedIndex:null)
-								return
-							}
-							this.resize(oldVal.length>0?oldVal.length:null)
-						}
-					},300)
-				})
-			}
-		},
-		methods:{
-			init(){   //initialize
-				this.root = this.$refs.vueWaterfall
-				this.clearColumn()
-				var col = parseInt(this.col)
-				for(var i =0;i<col;i++){
-					let odiv = document.createElement('div')
-					odiv.className = 'vue-waterfall-column'
-					if(this.width)
-					{
-						odiv.style.width = this.width + 'px'
-						if(i != 0)
-						{
-							odiv.style.marginLeft = this.gutterWidth + 'px'
-						}
-						this.columnWidth = this.width
-					}
-					else{
-						odiv.style.width = 100/parseInt(col) +'%'
-						this.columnWidth = 100/parseInt(col)/100 * document.documentElement.clientWidth
-					}
-					if(!this.root)
-					{
-						this.root = this.$refs.vueWaterfall
-					}
-					this.root&&this.root.appendChild(odiv)
-					this.columns.push(odiv)
-				}
-				this.resize()
-			},
-			async __setDomImageHeight(dom)
-			{
-				if(!dom.getElementsByTagName)
-				{
-					return
-				}
-				var imgs = dom.getElementsByTagName('img')
-				for(var i=0;i<imgs.length;i++)
-				{
-					var lazySrc = imgs[i].getAttribute('lazy-src')
-					if(!imgs[i].getAttribute('src')&&lazySrc)
-			 		{
-						 var newImg = new Image()
-						 newImg.src = lazySrc
-						 if(newImg.complete)
-						 {
-						 	var trueWidth = imgs[i].offsetWidth || this.columnWidth
-							var imgColumnHeight = newImg.height*trueWidth/newImg.width
-							if(imgs[i].offsetWidth)
-							{
-								imgs[i].style.height = imgColumnHeight+'px'
-							}
-						 }
-						 else{
-							 await new Promise((resolve,reject)=>{
-								 newImg.onload =  function(){
-									 
-								 	var trueWidth = imgs[i].offsetWidth || this.columnWidth
-								 	var imgColumnHeight = newImg.height*trueWidth/newImg.width
-									if(imgs[i].offsetWidth)
-									{
-										imgs[i].style.height = imgColumnHeight+'px'
-									}
-									resolve()
-								}
-								newImg.onerror=  function(){
-									resolve()
-								}
-							 })
-						 }
-			 		}
-				}			 	
-			},
-			async append(dom){   //append dom element
-				var self = this
-				if(this.columns.length>0)
-				{
-					let min = this.columns[0]
-						for(var i=1;i<this.columns.length;i++){
-							if(await self.__getHeight(min)>await self.__getHeight(self.columns[i])){
-								min = self.columns[i]
-							}
-						}
-					await this.__setDomImageHeight(dom)
-					min && min.appendChild(dom)
-				}
-			},
-			checkImg(dom){   //check has image
-				if(!dom)
-				{
-					return false
-				}
-				if(dom.getElementsByTagName&&dom.getElementsByTagName("img").length)
-				{
-					return true
-				}
-				else{
-					return false
-				}
-			},
-			async resize(index,elements){     //resize and render
-				this.isresizing = true
-				this.routeChanged = false  // 重置routeChanged
-				var self = this
-				if(!this.$slots.default){
-					this.isresizing = false
-					return
-				}
-				if(!index&&index!=0&&!elements)
-				{
-					elements = this.$slots.default
-					this.loadedIndex = 0
-					this.clear()
-				}
-				else if(!elements){
-					this.loadedIndex = index
-					elements = this.$slots.default.splice(index)
-				}
+      for (var j = 0; j < elements.length; j++) {
+        if (this.routeChanged) {
+          console.warn("路由发生变化，<vue-waterfall>组件停止渲染");
+          break;
+        }
+        if (elements[j].elm && self.checkImg(elements[j].elm)) {
+          var imgs = elements[j].elm.getElementsByTagName("img");
+          var newImg = new Image();
+          newImg.src =
+            imgs[0].getAttribute("src") || imgs[0].getAttribute("lazy-src");
+          if (newImg.complete) {
+            await self.append(elements[j].elm);
+            self.lazyLoad(imgs);
+          } else {
+            await new Promise((resolve, reject) => {
+              newImg.onload = async function () {
+                await self.append(elements[j].elm);
+                self.lazyLoad(imgs);
+                resolve();
+              };
+              newImg.onerror = async function (e) {
+                await self.append(elements[j].elm);
+                self.lazyLoad(imgs);
+                resolve();
+              };
+            });
+          }
+        } else {
+          await self.append(elements[j].elm);
+        }
+        self.loadedIndex++;
+      }
+      this.isresizing = false;
+      self.$emit("finish");
+    },
+    computedPx(img, imgApi) {
+      img.style.width = imgApi.width / this.columnWidth;
+    },
+    lazyLoad(imgs) {
+      if (!imgs) {
+        if (!this.root) {
+          this.root = this.$refs.vueWaterfall;
+        }
+        imgs = this.root && this.root.getElementsByTagName("img");
+      }
 
-				for(var j=0;j<elements.length;j++){
-					if(this.routeChanged){
-						console.warn('路由发生变化，<vue-waterfall>组件停止渲染')
-						break
-					}
-					if(elements[j].elm&&self.checkImg(elements[j].elm))
-					{
-						var imgs = elements[j].elm.getElementsByTagName('img')
-						var newImg = new Image()
-						newImg.src = imgs[0].getAttribute('src') || imgs[0].getAttribute('lazy-src')
-						if(newImg.complete)
-						{
-							await self.append(elements[j].elm)	
-							self.lazyLoad(imgs)
-						}
-						else{
-							await new Promise( (resolve,reject)=>{
-								newImg.onload = async function(){
-									await self.append(elements[j].elm)
-									self.lazyLoad(imgs)
-									resolve()
-								}
-								newImg.onerror= async function(e){
-									await self.append(elements[j].elm)
-									self.lazyLoad(imgs)
-									resolve()
-								}
-							})
-						}
-						
-					}
-					else{
-						await self.append(elements[j].elm)
-					}
-					self.loadedIndex++
-				}
-				this.isresizing = false
-				self.$emit('finish')
-				
-			},
-			computedPx(img,imgApi){
+      if (!imgs || imgs.length < 0) {
+        return;
+      }
+      for (var index = 0; index < imgs.length; index++) {
+        if (
+          imgs[index].className.match("animation") &&
+          imgs[index].getAttribute("src")
+        ) {
+          continue;
+        } else if (
+          imgs[index].className.match("animation") &&
+          !imgs[index].getAttribute("src")
+        ) {
+          imgs[index].src = imgs[index].getAttribute("lazy-src");
+          imgs[index].removeAttribute("lazy-src");
+        } else if (
+          imgs[index].getAttribute("src") &&
+          !imgs[index].className.match("animation")
+        ) {
+          imgs[index].className = imgs[index].className + " animation";
+        } else if (
+          !imgs[index].getAttribute("src") &&
+          imgs[index].getBoundingClientRect().top <
+            this.viewHeight + this.trueLazyDistance
+        ) {
+          imgs[index].src = imgs[index].getAttribute("lazy-src");
+          imgs[index].className = imgs[index].className + " animation";
+          imgs[index].removeAttribute("lazy-src");
+        }
+        console.log(
+          imgs[index].getBoundingClientRect().top,
+          this.viewHeight,
+          this.trueLazyDistance
+        );
+      }
+    },
+    clearColumn() {
+      this.columns.forEach((item) => {
+        item.remove();
+      });
+      this.columns = [];
+    },
+    clear() {
+      this.columns.forEach((item) => {
+        item.innerHTML = "";
+      });
+    },
+    mix() {
+      var elements = this.$slots.default;
+      elements.sort(() => {
+        return Math.random() - 0.5;
+      });
+      this.resize(0, elements);
+    },
+    async __getHeight(dom) {
+      return dom.offsetHeight;
+    },
+    __emitLoadMore() {
+      if (!this.root) {
+        return;
+      }
+      var self = this;
+      const scrollTop = this.height
+        ? this.root.scrollTop
+        : document.documentElement.scrollTop || document.body.scrollTop;
+      const scrollHeight = this.height
+        ? this.root.scrollHeight
+        : document.documentElement.offsetHeight;
 
-				img.style.width = imgApi.width/this.columnWidth
-			},
-			lazyLoad(imgs){  
-				if(!imgs)
-				{
-					if(!this.root)
-					{
-						this.root = this.$refs.vueWaterfall
-					}
-					imgs = this.root&&this.root.getElementsByTagName('img')
-				}
+      var diff = scrollHeight - scrollTop - this.viewHeight;
+      self.$emit("scroll", {
+        scrollHeight: scrollHeight,
+        scrollTop: scrollTop,
+        viewHeight: this.viewHeight,
+        clientHeight: self.clientHeight,
+        diff: diff,
+        time: Date.now(),
+      });
+      if (diff < self.max && self.loadmore && scrollHeight > this.viewHeight) {
+        self.lastScrollTop = scrollTop;
+        self.loadmore = false;
+        self.$emit("loadmore");
+      } else if (diff >= self.max) {
+        self.loadmore = true;
+      }
+      clearTimeout(self.lazyTimeout);
+      self.lazyTimeout = setTimeout(function () {
+        self.lazyLoad();
+      }, 14);
+    },
 
-				if(!imgs || imgs.length<0)
-				{
-					return
-				}
-				for(var index=0;index<imgs.length; index++)
-				{
-					if(imgs[index].className.match('animation')&&imgs[index].getAttribute('src'))
-					{
-						continue
-					}
-					else if(imgs[index].className.match('animation')&&!imgs[index].getAttribute('src'))
-					{
-						imgs[index].src = imgs[index].getAttribute('lazy-src')
-						imgs[index].removeAttribute('lazy-src')
-					}
-					else if(imgs[index].getAttribute('src')&&!imgs[index].className.match('animation')){
-						imgs[index].className = imgs[index].className + ' animation'
-					}
-					else if(!imgs[index].getAttribute('src')&&imgs[index].getBoundingClientRect().top<this.clientHeight+this.trueLazyDistance)
-					{
-						imgs[index].src = imgs[index].getAttribute('lazy-src')
-						imgs[index].className = imgs[index].className + ' animation'
-						imgs[index].removeAttribute('lazy-src')
-					}
-				}
-			},
-			clearColumn(){
-				this.columns.forEach((item)=>{
-					item.remove()
-				})
-				this.columns=[]
-			},
-			clear(){
-				this.columns.forEach((item)=>{
-					item.innerHTML = ''
-				})
-			},
-			mix(){
-				var elements = this.$slots.default
-				elements.sort(()=>{return Math.random()-0.5})
-				this.resize(0,elements)
-			},
-			async __getHeight(dom){
-			 	return dom.offsetHeight
-			},
-			__emitLoadMore(){
-				if(!this.root)
-				{
-					return
-				}
-				var self = this
-				const scrollTop =  this.height?this.root.scrollTop : document.documentElement.scrollTop  || document.body.scrollTop
-				const scrollHeight = this.height?this.root.scrollHeight : document.documentElement.offsetHeight
-				var diff = scrollHeight - scrollTop - self.clientHeight
-				self.$emit('scroll',{scrollHeight:scrollHeight,scrollTop:scrollTop,clientHeight:self.clientHeight,diff:diff,time:Date.now()})
-				if(diff <self.max&&self.loadmore&&scrollHeight>self.clientHeight){
-					self.lastScrollTop =  scrollTop
-					self.loadmore = false
-					self.$emit('loadmore')
-				}
-				else if(diff>=self.max){
-					self.loadmore = true
-				}
-				clearTimeout(self.lazyTimeout)
-				self.lazyTimeout = setTimeout(function(){
-					self.lazyLoad()
-				},14)
-			},
+    // 监听路由是否发生变化
+    __listenRouterChange() {
+      // 重写pushState与replaceState事件函数
+      var _wr = function (type) {
+        // 记录原生事件
+        var orig = history[type];
+        return function () {
+          // 触发原生事件
+          var rv = orig.apply(this, arguments);
+          // 自定义事件
+          var e = new Event(type);
+          e.arguments = arguments;
+          // 触发自定义事件
+          window.dispatchEvent(e);
+          return rv;
+        };
+      };
+      const events = ["replaceState", "pushState"];
+      events.forEach((event) => {
+        window.addEventListener(event, () => {
+          this.routeChanged = true;
+        });
+        // 重写history
+        window.history[event] = _wr(event);
+      });
+      window.addEventListener("popstate", () => {
+        this.routeChanged = true;
+      });
+    },
+  },
 
-			// 监听路由是否发生变化
-			__listenRouterChange () {
-				// 重写pushState与replaceState事件函数
-				var _wr = function (type) {
-					// 记录原生事件
-					var orig = history[type];
-					return function () {
-						// 触发原生事件
-						var rv = orig.apply(this, arguments);
-						// 自定义事件
-						var e = new Event(type);
-						e.arguments = arguments;
-						// 触发自定义事件
-						window.dispatchEvent(e);
-						return rv;
-					}
-				}
-				const events = ['replaceState','pushState']
-				events.forEach(event => {
-					window.addEventListener(event, ()=>{
-						this.routeChanged = true
-					})
-					// 重写history
-					window.history[event] = _wr(event)
-				})
-				window.addEventListener('popstate', ()=>{
-					this.routeChanged = true
-				})
+  destroyed() {
+    this.root && (this.root.onscroll = null);
+    this.root && (this.root.onresize = null);
+    window.onscroll = null;
+    window.onresize = null;
+  },
+  beforeCreate() {
+    bus.$on("forceUpdate", () => {
+      this.resize();
+    });
+    bus.$on("mix", () => {
+      this.mix();
+    });
+  },
 
-			},
-		},
-		
-		destroyed() {
-			this.root && (this.root.onscroll = null)
-			this.root && (this.root.onresize = null)
-			window.onscroll = null
-			window.onresize = null
-		},
-		beforeCreate(){
-			bus.$on('forceUpdate',()=>{this.resize()})
-			bus.$on('mix',()=>{this.mix()})
-			
-		},
-		
-		mounted(){
-			this.__listenRouterChange()
-			this.$nextTick(()=>{
-				this.init()
-				var self = this;
-				if(this.height){
-					this.root.onscroll=function(e){
-						self.__emitLoadMore()
-					}
-					this.root.addEventListener('touchmove',function(){
-						self.__emitLoadMore()
-					})
-				}
-				else{
-					window.onscroll=function(e){
-						self.__emitLoadMore()
-					}
-					document.addEventListener('touchmove',function(){
-						self.__emitLoadMore()
-					})
-
-				}
-			})
-		}
-	}
+  mounted() {
+    this.__listenRouterChange();
+    this.$nextTick(() => {
+      this.init();
+      var self = this;
+      if (this.height) {
+        this.root.onscroll = function (e) {
+          self.__emitLoadMore();
+        };
+        this.root.addEventListener("touchmove", function () {
+          self.__emitLoadMore();
+        });
+      } else {
+        window.onscroll = function (e) {
+          self.__emitLoadMore();
+        };
+        document.addEventListener("touchmove", function () {
+          self.__emitLoadMore();
+        });
+      }
+    });
+  },
+};
 </script>
\ No newline at end of file
diff --git a/package.json b/package.json
index 2d933ac..6ab0df7 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "less-loader": "^5.0.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.1",
-    "vue-waterfall2": "^1.10.1"
+    "vue-waterfall2": "^1.10.4"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
@@ -59,10 +59,15 @@
     "node": ">= 6.0.0",
     "npm": ">= 3.0.0"
   },
-  "keywords": ["vue","vue-waterfall","vue-waterfall2","waterfall"],
+  "keywords": [
+    "vue",
+    "vue-waterfall",
+    "vue-waterfall2",
+    "waterfall"
+  ],
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
   ]
-}
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 0cce42c..f19c52b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,25 +1,35 @@
 <template>
   <div id="app">
-    <!-- <img src="./assets/logo.png"> -->
     <!-- <keep-alive> -->
-      <router-view/>
+    <router-view />
     <!-- </keep-alive> -->
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
-}
+  name: "App",
+};
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /*text-align: center;*/
   color: #2c3e50;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
   /*margin-top: 60px;*/
 }
+body {
+  /* width: 100vw;
+  height: 100vh; */
+  margin: 0;
+  padding: 10px;
+  padding-bottom: 0;
+  box-sizing: border-box;
+}
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 1ca8171..0f79de3 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,138 +1,172 @@
 <style  lang="less" scoped>
-*{
+* {
   margin: 0;
 }
-  .container-water-fall{
-    // padding: 0 28px;
-    width: 100vw;
-    box-sizing:border-box;
-    h4{
-        padding-top: 56px;
-        padding-bottom:28px;
-        font-family: PingFangSC-Medium;
-      font-size: 36px;
-      color: #000000;
-      letter-spacing: 1px;
-      text-align: justify;
-    }
-    button{
-      background-color: #ff0;
-      color: #24292e;
-      border: 1px solid rgba(27,31,35,.2);
-      border-radius: .25em;
-      width: 100px;
-      line-height: 26px;
-      font-size: 13px;
-      margin: 4px 0;
-      margin-right: 4px;
-      cursor: pointer;
-      outline: none;
-      &.blue-light{
-        background: #27fbc2;
-      }
+.container-water-fall {
+  // padding: 0 28px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  h4 {
+    padding-top: 56px;
+    padding-bottom: 28px;
+    font-family: PingFangSC-Medium;
+    font-size: 36px;
+    color: #000000;
+    letter-spacing: 1px;
+    text-align: justify;
+  }
+  button {
+    background-color: #ff0;
+    color: #24292e;
+    border: 1px solid rgba(27, 31, 35, 0.2);
+    border-radius: 0.25em;
+    width: 100px;
+    line-height: 26px;
+    font-size: 13px;
+    margin: 4px 0;
+    margin-right: 4px;
+    cursor: pointer;
+    outline: none;
+    &.blue-light {
+      background: #27fbc2;
     }
-    button:hover{
-      background-image: linear-gradient(-180deg,#fafbfc,#ccc 90%);
+  }
+  button:hover {
+    background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);
+  }
+
+  .cell-item {
+    width: 100%;
+    margin-bottom: 10px;
+    background: #ffffff;
+    border: 2px solid #f0f0f0;
+    border-radius: 12px 12px 12px 12px;
+    overflow: hidden;
+    box-sizing: border-box;
+    img {
+      // border-radius: 12px 12px 0 0;
+      width: 100%;
+      height: auto;
+      display: block;
     }
-    
-    .cell-item{
-            width: 100%;
-            margin-bottom: 10px;
-            background: #ffffff;
-            border: 2px solid #F0F0F0;
-            border-radius: 12px 12px 12px 12px;
-            overflow: hidden;
-            box-sizing:border-box;
-            img{
-                // border-radius: 12px 12px 0 0;
-                width: 100%;
-                height: auto;
-                display: block;
+    .item-body {
+      // border: 1px solid #F0F0F0;
+      padding: 12px;
+      .item-desc {
+        font-size: 15px;
+        color: #333333;
+        line-height: 15px;
+        font-weight: bold;
+      }
+      .item-footer {
+        margin-top: 22px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        .avatar {
+          width: 44px;
+          height: 44px;
+          border-radius: 50%;
+          background-repeat: no-repeat;
+          background-size: contain;
+        }
+        .name {
+          max-width: 150px;
+          margin-left: 10px;
+          font-size: 14px;
+          color: #999999;
+        }
+        .like {
+          position: absolute;
+          right: 0;
+          display: flex;
+          align-items: center;
+          &.active {
+            i {
             }
-            .item-body{
-              // border: 1px solid #F0F0F0;
-                padding: 12px;
-                .item-desc{
-                    font-size: 15px;
-                    color: #333333;
-                    line-height: 15px;
-                    font-weight: bold;
-                }
-                .item-footer{
-                    margin-top: 22px;
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    .avatar{
-                        width: 44px;
-                        height: 44px;
-                        border-radius: 50%;
-                        background-repeat: no-repeat;
-                        background-size: contain;
-                    }
-                    .name{
-                        max-width: 150px;
-                        margin-left: 10px;
-                        font-size: 14px;
-                        color: #999999;
-                    }
-                    .like{
-                        position: absolute;
-                        right: 0;
-                        display: flex;
-                        align-items: center;
-                        &.active{
-                          i{
-                          }
-                          .like-total{
-                            color:#FF4479;
-                          }
-                        } 
-                        i{
-                            width: 28px;
-                            display: block;
-                            
-                        }
-                        .like-total{
-                            margin-left: 10px;
-                            font-size: 12px;
-                            color: #999999;
-                        }
-                    }
-            
-                }
+            .like-total {
+              color: #ff4479;
             }
+          }
+          i {
+            width: 28px;
+            display: block;
+          }
+          .like-total {
+            margin-left: 10px;
+            font-size: 12px;
+            color: #999999;
+          }
         }
-  }
-  .githubdata{
-    float: right;
-    margin-right: 90px;
-    img{
-      width: 14px;
-      // height: 16px;
+      }
     }
   }
+}
+.githubdata {
+  float: right;
+  margin-right: 90px;
+  img {
+    width: 14px;
+    // height: 16px;
+  }
+}
 </style>
 <template>
   <div class="container-water-fall">
     <!-- <h1 style="position: fixed;left: 0;top: 100px;font-style: 15px;color:blue;z-index: 1000;">{{loadstatus}}</h1> -->
-    <div class="btn-group"><button style="width:250px;"  class="blue-light"><router-link to="/lazy">To Lazy Demo (前往懒加载Demo)</router-link></button> <button @click="loadmore">LoadMore</button><button @click="switchCol(5)">5column(列)</button> <button @click="switchCol(8)">8column(列)</button> <button @click="switchCol(10)">10column(列)</button> <button @click="reset">reset(重置)</button> <a style="color:red;" href="https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md" target="_blank" >GITHUB</a> <b style="color:blue">滚动至底部可触发loadmore</b>
-    
-    <div class="githubdata" @click="toGitHub"><button  class="blue-light"><img src="../assets/star.png"  /> Star <span>{{gitHubData.stargazers_count}}</span></button><button  class="blue-light"><img src="../assets/fork.png"  /> Fork <span>{{gitHubData.forks_count}}</span></button></div>  </div>
-    <waterfall :col='col'   :data="data"   @loadmore="loadmore" @scroll="scroll" @finish="finish" :height="'100vh'"  >
-      <template >
-        <div class="cell-item" v-for="(item,index) in data" :key="index"  >
-          <img v-if="item.img" :src="item.img" alt="加载错误"  />
+    <div class="btn-group">
+      <button style="width: 250px" class="blue-light">
+        <router-link to="/lazy">To Lazy Demo (前往懒加载Demo)</router-link>
+      </button>
+      <button @click="loadmore">LoadMore</button
+      ><button @click="switchCol(5)">5column(列)</button>
+      <button @click="switchCol(8)">8column(列)</button>
+      <button @click="switchCol(10)">10column(列)</button>
+      <button @click="reset">reset(重置)</button>
+      <a
+        style="color: red"
+        href="https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md"
+        target="_blank"
+        >GITHUB</a
+      >
+      <b style="color: blue">滚动至底部可触发loadmore</b>
+
+      <div class="githubdata" @click="toGitHub">
+        <button class="blue-light">
+          <img src="../assets/star.png" /> Star
+          <span>{{ gitHubData.stargazers_count }}</span></button
+        ><button class="blue-light">
+          <img src="../assets/fork.png" /> Fork
+          <span>{{ gitHubData.forks_count }}</span>
+        </button>
+      </div>
+    </div>
+    <waterfall
+      :col="col"
+      :data="data"
+      @loadmore="loadmore"
+      @scroll="scroll"
+      @finish="finish"
+      :height="'100vh'"
+    >
+      <template>
+        <div class="cell-item" v-for="(item, index) in data" :key="index">
+          <img v-if="item.img" :src="item.img" alt="加载错误" />
           <div class="item-body">
-              <div class="item-desc">{{item.title}}</div>
-              <div class="item-footer">
-                  <div v-if="item.avatar" class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div>
-                  <div class="name">{{item.user}}</div>
-                  <div class="like" :class="item.liked?'active':''" >
-                      <i ></i>
-                      <div class="like-total">{{item.like}}</div>  
-                  </div>
+            <div class="item-desc">{{ item.title }}</div>
+            <div class="item-footer">
+              <div
+                v-if="item.avatar"
+                class="avatar"
+                :style="{ backgroundImage: `url(${item.avatar})` }"
+              ></div>
+              <div class="name">{{ item.user }}</div>
+              <div class="like" :class="item.liked ? 'active' : ''">
+                <i></i>
+                <div class="like-total">{{ item.like }}</div>
               </div>
+            </div>
           </div>
         </div>
       </template>
@@ -148,76 +182,79 @@
   2.使用了waterfall的组件不允许使用scoped,否则样式会有问题
 */
 // import Vue from 'vue'
-import loading from './loading'
+import loading from "./loading";
 
-import json from './data.json'
+import json from "./data.json";
 // import  routerLink  from 'vue-router'
-  export default{
-    props:{
-      title:String
+export default {
+  props: {
+    title: String,
+  },
+  components: {
+    loading,
+  },
+  data() {
+    return {
+      data: [],
+      col: 5,
+      loading: false,
+      gitHubData: {},
+      originData: json,
+    };
+  },
+  computed: {
+    itemWidth() {
+      return 133 * 0.5 * (document.documentElement.clientWidth / 375);
     },
-    components:{
-      loading
+    gutterWidth() {
+      return 10 * 0.5 * (document.documentElement.clientWidth / 375);
     },
-    data(){
-      return{
-        data:[],
-        col:5,
-        loading:false,
-        gitHubData:{},
-        originData: json
-      }
+  },
+  methods: {
+    finish() {
+      console.error("finish");
     },
-    computed:{
-      itemWidth(){ 
-        return (133*0.5*(document.documentElement.clientWidth/375))
-      },
-      gutterWidth(){
-        return (10*0.5*(document.documentElement.clientWidth/375))
-      }
+    toGitHub() {
+      window.open(
+        "https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md",
+        "_blank"
+      );
+    },
+    reset() {
+      this.data = [];
     },
-    methods:{
-      finish(){
-        console.error('finish')
-      },
-      toGitHub(){
-        window.open("https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md",'_blank')
-      },
-      reset(){
-        this.data = []
-      },
 
-      switchCol(col){
-        this.col = col
-        // console.log(this.col)
-      },
-      getGitHub(){
-        fetch('https://api.github.com/repos/AwesomeDevin/vue-waterfall2').then((data)=>{
-          data.json().then((res)=>{
+    switchCol(col) {
+      this.col = col;
+      // console.log(this.col)
+    },
+    getGitHub() {
+      fetch("https://api.github.com/repos/AwesomeDevin/vue-waterfall2").then(
+        (data) => {
+          data.json().then((res) => {
             // console.log(res)
-            this.gitHubData = res
-          })
-        })
-      },
-      scroll(data){
-        // console.log(data)
-      },
-
-      loadmore(num){
-
-        this.loading = true
-        setTimeout(()=>{
-          this.data = this.data.concat(this.originData,this.originData)
-          this.loading = false
-        },1000)
-      },
+            this.gitHubData = res;
+          });
+        }
+      );
+    },
+    scroll(data) {
+      // console.log(data)
+    },
 
+    loadmore(num) {
+      this.loading = true;
+      setTimeout(() => {
+        this.data = this.data.concat(this.originData, this.originData);
+        this.loading = false;
+      }, 1000);
     },
-    mounted(){
-      var self = this;
-      this.data = this.originData
-      this.getGitHub()
-      // this.data = []
-    }
-  }
+  },
+  mounted() {
+    var self = this;
+    this.data = this.originData;
+    this.getGitHub();
+    // this.data = []
+  },
+};
 </script>
\ No newline at end of file
diff --git a/src/components/evaluateList.vue b/src/components/evaluateList.vue
index 501d454..9d2e2ff 100644
--- a/src/components/evaluateList.vue
+++ b/src/components/evaluateList.vue
@@ -1,142 +1,188 @@
 <style  lang="less" scoped>
-*{
+* {
   margin: 0;
 }
-  .container-water-fall{
-    // padding: 0 28px;
-    width: 100vw;
-    box-sizing:border-box;
-    h4{
-        padding-top: 56px;
-        padding-bottom:28px;
-        font-family: PingFangSC-Medium;
-      font-size: 36px;
-      color: #000000;
-      letter-spacing: 1px;
-      text-align: justify;
-    }
-    button{
-      background-color: #ff0;
-      color: #24292e;
-      border: 1px solid rgba(27,31,35,.2);
-      border-radius: .25em;
-      width: 100px;
-      line-height: 26px;
-      font-size: 13px;
-      margin: 4px 0;
-      margin-right: 4px;
-      cursor: pointer;
-      outline: none;
-      &.blue-light{
-        background: #27fbc2;
-      }
+.container-water-fall {
+  // padding: 0 28px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .btn-group {
+    width: 100%;
+  }
+
+  .waterfall {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  h4 {
+    padding-top: 56px;
+    padding-bottom: 28px;
+    font-family: PingFangSC-Medium;
+    font-size: 36px;
+    color: #000000;
+    letter-spacing: 1px;
+    text-align: justify;
+  }
+  button {
+    background-color: #ff0;
+    color: #24292e;
+    border: 1px solid rgba(27, 31, 35, 0.2);
+    border-radius: 0.25em;
+    width: 100px;
+    line-height: 26px;
+    font-size: 13px;
+    margin: 4px 0;
+    margin-right: 4px;
+    cursor: pointer;
+    outline: none;
+    &.blue-light {
+      background: #27fbc2;
     }
-    button:hover{
-      background-image: linear-gradient(-180deg,#fafbfc,#ccc 90%);
+  }
+  button:hover {
+    background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);
+  }
+
+  .cell-item {
+    width: 100%;
+    // margin-bottom: 18px;
+    background: #ffffff;
+    border: 2px solid #f0f0f0;
+    border-radius: 12px 12px 12px 12px;
+    overflow: hidden;
+    box-sizing: border-box;
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
     }
-    
-    .cell-item{
-            width: 100%;
-            // margin-bottom: 18px;
-            background: #ffffff;
-            border: 2px solid #F0F0F0;
-            border-radius: 12px 12px 12px 12px;
-            overflow: hidden;
-            box-sizing:border-box;
-            img{
-                // border-radius: 12px 12px 0 0;
-                width: 100%;
-                height: auto;
-                display: block;
+    .item-body {
+      // border: 1px solid #F0F0F0;
+      padding: 12px;
+      .item-desc {
+        font-size: 15px;
+        color: #333333;
+        line-height: 15px;
+        font-weight: bold;
+      }
+      .item-footer {
+        margin-top: 22px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        .avatar {
+          width: 44px;
+          height: 44px;
+          border-radius: 50%;
+          background-repeat: no-repeat;
+          background-size: contain;
+        }
+        .name {
+          max-width: 150px;
+          margin-left: 10px;
+          font-size: 14px;
+          color: #999999;
+        }
+        .like {
+          position: absolute;
+          right: 0;
+          display: flex;
+          align-items: center;
+          &.active {
+            i {
             }
-            .item-body{
-              // border: 1px solid #F0F0F0;
-                padding: 12px;
-                .item-desc{
-                    font-size: 15px;
-                    color: #333333;
-                    line-height: 15px;
-                    font-weight: bold;
-                }
-                .item-footer{
-                    margin-top: 22px;
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    .avatar{
-                        width: 44px;
-                        height: 44px;
-                        border-radius: 50%;
-                        background-repeat: no-repeat;
-                        background-size: contain;
-                    }
-                    .name{
-                        max-width: 150px;
-                        margin-left: 10px;
-                        font-size: 14px;
-                        color: #999999;
-                    }
-                    .like{
-                        position: absolute;
-                        right: 0;
-                        display: flex;
-                        align-items: center;
-                        &.active{
-                          i{
-                          }
-                          .like-total{
-                            color:#FF4479;
-                          }
-                        } 
-                        i{
-                            width: 28px;
-                            display: block;
-                            
-                        }
-                        .like-total{
-                            margin-left: 10px;
-                            font-size: 12px;
-                            color: #999999;
-                        }
-                    }
-            
-                }
+            .like-total {
+              color: #ff4479;
             }
+          }
+          i {
+            width: 28px;
+            display: block;
+          }
+          .like-total {
+            margin-left: 10px;
+            font-size: 12px;
+            color: #999999;
+          }
         }
-  }
-  .githubdata{
-    float: right;
-    margin-right: 90px;
-    img{
-      width: 14px;
-      // height: 16px;
+      }
     }
   }
+}
+.githubdata {
+  float: right;
+  margin-right: 90px;
+  img {
+    width: 14px;
+    // height: 16px;
+  }
+}
 </style>
 <template>
   <div class="container-water-fall">
     <!-- <h1 style="position: fixed;left: 0;top: 100px;font-style: 15px;color:blue;z-index: 1000;">{{loadstatus}}</h1> -->
-    <div class="btn-group"><button style="width:250px;"  class="blue-light"><router-link to="/">To Common Demo (前往普通Demo)</router-link></button><button @click="loadmore">LoadMore</button> <button @click="switchCol(5)">5column(列)</button> <button @click="switchCol(8)">8column(列)</button> <button @click="switchCol(10)">10column(列)</button> <button @click="reset">reset(重置)</button> <a style="color:red;" href="https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md" target="_blank" >GITHUB</a> <b style="color:blue">滚动至底部可触发loadmore</b>
-    
-    <div class="githubdata" @click="toGitHub"><button  class="blue-light"><img src="../assets/star.png"  /> Star <span>{{gitHubData.stargazers_count}}</span></button><button  class="blue-light"><img src="../assets/fork.png"  /> Fork <span>{{gitHubData.forks_count}}</span></button></div>  </div>
-    <waterfall :col='col'   :data="data"  @loadmore="loadmore" :lazyDistance="50"  >
-      <template >
-        <div class="cell-item" v-for="(item,index) in data" :key="index"  >
-          <img v-if="item.img"  :lazy-src="item.img" alt="加载错误"  />
-          <div class="item-body">
-              <div class="item-desc">{{item.title}}</div>
+    <div class="btn-group">
+      <button style="width: 250px" class="blue-light">
+        <router-link to="/">To Common Demo (前往通用Demo)</router-link></button
+      ><button @click="loadmore">LoadMore</button>
+      <button @click="switchCol(5)">5column(列)</button>
+      <button @click="switchCol(8)">8column(列)</button>
+      <button @click="switchCol(10)">10column(列)</button>
+      <button @click="reset">reset(重置)</button>
+      <a
+        style="color: red"
+        href="https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md"
+        target="_blank"
+        >GITHUB</a
+      >
+      <b style="color: blue">滚动至底部可触发loadmore</b>
+
+      <div class="githubdata" @click="toGitHub">
+        <button class="blue-light">
+          <img src="../assets/star.png" /> Star
+          <span>{{ gitHubData.stargazers_count }}</span></button
+        ><button class="blue-light">
+          <img src="../assets/fork.png" /> Fork
+          <span>{{ gitHubData.forks_count }}</span>
+        </button>
+      </div>
+    </div>
+    <div class="waterfall">
+      <waterfall
+        :col="col"
+        :data="data"
+        @loadmore="loadmore"
+        :lazyDistance="50"
+      >
+        <template>
+          <div class="cell-item" v-for="(item, index) in data" :key="index">
+            <img v-if="item.img" :lazy-src="item.img" alt="加载错误" />
+            <div class="item-body">
+              <div class="item-desc">{{ item.title }}</div>
               <div class="item-footer">
-                  <div v-if="item.avatar" class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div>
-                  <div class="name">{{item.user}}</div>
-                  <div class="like" :class="item.liked?'active':''" >
-                      <i ></i>
-                      <div class="like-total">{{item.like}}</div>  
-                  </div>
+                <div
+                  v-if="item.avatar"
+                  class="avatar"
+                  :style="{ backgroundImage: `url(${item.avatar})` }"
+                ></div>
+                <div class="name">{{ item.user }}</div>
+                <div class="like" :class="item.liked ? 'active' : ''">
+                  <i></i>
+                  <div class="like-total">{{ item.like }}</div>
+                </div>
               </div>
+            </div>
           </div>
-        </div>
-      </template>
-    </waterfall>
+        </template>
+      </waterfall>
+    </div>
     <loading :show="loading" />
   </div>
 </template>
@@ -148,69 +194,73 @@
   2.使用了waterfall的组件不允许使用scoped,否则样式会有问题
 */
 // import Vue from 'vue'
-import loading from './loading'
-import json from './data.json'
+import loading from "./loading";
+import json from "./data.json";
 
 // import  routerLink  from 'vue-router'
-  export default{
-    props:{
-      title:String
+export default {
+  props: {
+    title: String,
+  },
+  components: {
+    loading,
+  },
+  data() {
+    return {
+      data: [],
+      col: 5,
+      loading: false,
+      gitHubData: {},
+      originData: json,
+    };
+  },
+  computed: {
+    itemWidth() {
+      return 133 * 0.5 * (document.documentElement.clientWidth / 375);
     },
-    components:{
-      loading
+    gutterWidth() {
+      return 10 * 0.5 * (document.documentElement.clientWidth / 375);
     },
-    data(){
-      return{
-        data:[],
-        col:5,
-        loading:false,
-        gitHubData:{},
-        originData:json
-      }
+  },
+  methods: {
+    toGitHub() {
+      window.open(
+        "https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md",
+        "_blank"
+      );
     },
-    computed:{
-      itemWidth(){ 
-        return (133*0.5*(document.documentElement.clientWidth/375))
-      },
-      gutterWidth(){
-        return (10*0.5*(document.documentElement.clientWidth/375))
-      }
+    reset() {
+      this.data = [];
     },
-    methods:{
-      toGitHub(){
-        window.open("https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md",'_blank')
-      },
-      reset(){
-        this.data = []
-      },
 
-      switchCol(col){
-        this.col = col
-        // console.log(this.col)
-      },
-      getGitHub(){
-        fetch('https://api.github.com/repos/AwesomeDevin/vue-waterfall2').then((data)=>{
-          data.json().then((res)=>{
+    switchCol(col) {
+      this.col = col;
+      // console.log(this.col)
+    },
+    getGitHub() {
+      fetch("https://api.github.com/repos/AwesomeDevin/vue-waterfall2").then(
+        (data) => {
+          data.json().then((res) => {
             // console.log(res)
-            this.gitHubData = res
-          })
-        })
-      },
-
-      loadmore(num){
-        console.log('loadmore')
-        this.loading = true
-        setTimeout(()=>{
-          this.data = this.data.concat(this.originData,this.originData)
-          this.loading = false
-        },1000)
-      },
+            this.gitHubData = res;
+          });
+        }
+      );
+    },
 
+    loadmore(num) {
+      console.log("loadmore");
+      this.loading = true;
+      setTimeout(() => {
+        this.data = this.data.concat(this.originData, this.originData);
+        this.loading = false;
+      }, 1000);
     },
-    mounted(){
-      var self = this;
-      this.data = this.originData
-      this.getGitHub()
-    }
-  }
+  },
+  mounted() {
+    var self = this;
+    this.data = this.originData.slice(0, 20);
+    this.getGitHub();
+  },
+};
 </script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 4e9ebe7..df344dd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,18 +1,18 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import App from './App'
-import router from './router'
+import Vue from "vue";
+import App from "./App";
+import router from "./router";
 
-Vue.config.productionTip = false
-import waterfall from 'vue-waterfall2'
-// import waterfall from '../lib'
+Vue.config.productionTip = false;
+import waterfall from "vue-waterfall2";
+// import waterfall from "../lib";
 
-Vue.use(waterfall)
+Vue.use(waterfall);
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   components: { App },
-  template: '<App/>'
-})
+  template: "<App/>"
+});
diff --git a/src/router/index.js b/src/router/index.js
index 6b001a5..2c60626 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,22 +1,21 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
-import lazy from '@/components/evaluateList'
+import Vue from "vue";
+import Router from "vue-router";
+import HelloWorld from "@/components/HelloWorld";
+import Lazy from "@/components/evaluateList";
 
-
-Vue.use(Router)
+Vue.use(Router);
 
 export default new Router({
   routes: [
     {
-      path: '/',
-      name: 'HelloWorld',
+      path: "/",
+      name: "HelloWorld",
       component: HelloWorld
     },
     {
-      path: '/lazy',
-      name: 'lazy',
-      component: lazy
+      path: "/lazy",
+      name: "lazy",
+      component: Lazy
     }
   ]
-})
+});
diff --git a/yarn.lock b/yarn.lock
index 50820c0..2c3890e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6785,10 +6785,10 @@ vue-template-es2015-compiler@^1.6.0:
   resolved "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue-waterfall2@^1.10.1:
-  version "1.10.1"
-  resolved "https://registry.npmjs.org/vue-waterfall2/-/vue-waterfall2-1.10.1.tgz#c8fdcbf77f56d44bd1e5bad4a551960e6a22eff8"
-  integrity sha512-qVHuGMjU7440n0kUHxouSJGuhlFCi4EcA4UhwF3GPxLsWgZxAeE803m+HYssMuhO9Nma222TFhEqwXslhrg2tg==
+vue-waterfall2@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.npmjs.org/vue-waterfall2/-/vue-waterfall2-1.10.4.tgz#04fe8d948157f11728239d5b01074bc81ec166fa"
+  integrity sha512-Hh2sGAJm69AlLD2q2MJJTeF0c4AFMdOJMrQW1BzEL5aI1zNmG6G3e0QCPnAfaAYgPKM7qIRGsV3+Si6RjbOKzg==
   dependencies:
     babel-runtime "^6.26.0"
     regenerator-runtime "^0.13.1"