From 435c009eff95ca8a544ea72041d8c09cbe63566d Mon Sep 17 00:00:00 2001
From: MopTym <moptym@163.com>
Date: Sat, 27 Feb 2016 14:03:23 +0800
Subject: [PATCH] optimize performance

---
 lib/vue-waterfall.min.js |  4 +-
 lib/waterfall-slot.vue   |  7 ++++
 lib/waterfall.vue        | 86 +++++++++++++++++++++-------------------
 package.json             |  2 +-
 src/waterfall-slot.vue   |  7 ++++
 src/waterfall.vue        | 86 +++++++++++++++++++++-------------------
 6 files changed, 107 insertions(+), 85 deletions(-)

diff --git a/lib/vue-waterfall.min.js b/lib/vue-waterfall.min.js
index 3a0c7d5..d04307a 100644
--- a/lib/vue-waterfall.min.js
+++ b/lib/vue-waterfall.min.js
@@ -1,6 +1,6 @@
 /*!
- * vue-waterfall v0.2.0
+ * vue-waterfall v0.2.1
  * (c) 2016 MopTym <moptym@163.com>
  * https://github.com/MopTym/vue-waterfall
  */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Waterfall=e():t.Waterfall=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}var r=n(1),o=i(r),a=n(8),s=i(a);t.exports={Waterfall:o["default"],WaterfallSlot:s["default"],waterfall:o["default"],waterfallSlot:s["default"]}},function(t,e,n){var i,r;n(2),i=n(6),r=n(7),t.exports=i||{},t.exports.__esModule&&(t.exports=t.exports["default"]),r&&(("function"==typeof t.exports?t.exports.options||(t.exports.options={}):t.exports).template=r)},function(t,e,n){var i=n(3);"string"==typeof i&&(i=[[t.id,i,""]]);n(5)(i,{});i.locals&&(t.exports=i.locals)},function(t,e,n){e=t.exports=n(4)(),e.push([t.id,".vue-waterfall{position:relative}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var n=this[e];n[2]?t.push("@media "+n[2]+"{"+n[1]+"}"):t.push(n[1])}return t.join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(i[o]=!0)}for(r=0;r<e.length;r++){var a=e[r];"number"==typeof a[0]&&i[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},function(t,e,n){function i(t,e){for(var n=0;n<t.length;n++){var i=t[n],r=d[i.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](i.parts[o]);for(;o<i.parts.length;o++)r.parts.push(l(i.parts[o],e))}else{for(var a=[],o=0;o<i.parts.length;o++)a.push(l(i.parts[o],e));d[i.id]={id:i.id,refs:1,parts:a}}}}function r(t){for(var e=[],n={},i=0;i<t.length;i++){var r=t[i],o=r[0],a=r[1],s=r[2],l=r[3],u={css:a,media:s,sourceMap:l};n[o]?n[o].parts.push(u):e.push(n[o]={id:o,parts:[u]})}return e}function o(t,e){var n=p(),i=m[m.length-1];if("top"===t.insertAt)i?i.nextSibling?n.insertBefore(e,i.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),m.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(e)}}function a(t){t.parentNode.removeChild(t);var e=m.indexOf(t);e>=0&&m.splice(e,1)}function s(t){var e=document.createElement("style");return e.type="text/css",o(t,e),e}function l(t,e){var n,i,r;if(e.singleton){var o=g++;n=v||(v=s(e)),i=u.bind(null,n,o,!1),r=u.bind(null,n,o,!0)}else n=s(e),i=f.bind(null,n),r=function(){a(n)};return i(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;i(t=e)}else r()}}function u(t,e,n,i){var r=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=x(e,r);else{var o=document.createTextNode(r),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(o,a[e]):t.appendChild(o)}}function f(t,e){var n=e.css,i=e.media,r=e.sourceMap;if(i&&t.setAttribute("media",i),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var d={},c=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},h=c(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),p=c(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,g=0,m=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=h()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var n=r(t);return i(n,e),function(t){for(var o=[],a=0;a<n.length;a++){var s=n[a],l=d[s.id];l.refs--,o.push(l)}if(t){var u=r(t);i(u,e)}for(var a=0;a<o.length;a++){var l=o[a];if(0===l.refs){for(var f=0;f<l.parts.length;f++)l.parts[f]();delete d[l.id]}}}};var x=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){"use strict";function n(){this.autoResize?window.addEventListener("resize",this.reflowHandler,!1):window.removeEventListener("resize",this.reflowHandler,!1)}function i(t){var e=t.target;e._wfMoveClass&&m(e,e._wfMoveClass)}function r(t){return function(){clearTimeout(t),t=setTimeout(this.reflow,this.interval)}}function o(){var t=this,e=this.$el.clientWidth,n=this.$children.map(function(t){return t.getMeta()});n.sort(function(t,e){return t.order-e.order}),this.virtualStyles=n.map(function(){return{}}),s(this,n,this.virtualStyles),setTimeout(function(){a(t.$el,e)&&s(t,n,t.virtualStyles),t.style.overflow="hidden",f(t.virtualStyles,n),t.$broadcast("wf-reflowed",[t]),t.$dispatch("wf-reflowed",[t])},0)}function a(t,e){return e!==t.clientWidth}function s(t,e,n){var i=l(t),r="h"===t.line?L:G;r.calculate(t,i,e,n)}function l(t){return{align:~["left","right","center"].indexOf(t.align)?t.align:"left",line:~["v","h"].indexOf(t.line)?t.line:"v",lineGap:+t.lineGap,minLineGap:t.minLineGap?+t.minLineGap:t.lineGap,maxLineGap:t.maxLineGap?+t.maxLineGap:t.lineGap,singleMaxWidth:Math.max(t.singleMaxWidth||0,t.maxLineGap),fixedHeight:!!t.fixedHeight}}function u(t,e,n){switch(n){case"right":return t-e;case"center":return(t-e)/2;default:return 0}}function f(t,e){var n=e.filter(function(t){return t.moveClass}),i=d(n);c(t,e);var r=d(n);n.forEach(function(t,e){t.node._wfMoveClass=t.moveClass,h(t.node,i[e],r[e])}),document.body.clientWidth,n.forEach(function(t){g(t.node,t.moveClass),p(t.node)})}function d(t){return t.map(function(t){return t.node.getBoundingClientRect()})}function c(t,e){t.forEach(function(t,n){var i=e[n].node.style;for(var r in t)i[r]=t[r]+"px"})}function h(t,e,n){var i=e.left-n.left,r=e.top-n.top,o=e.width/n.width,a=e.height/n.height;t.style.transform=t.style.WebkitTransform="translate("+i+"px,"+r+"px) scale("+o+","+a+")",t.style.transitionDuration="0s"}function p(t){t.style.transform=t.style.WebkitTransform="",t.style.transitionDuration=""}function v(t,e){for(var n="function"==typeof t?function(){return t()}:function(){return t},i=[],r=0;e>r;r++)i[r]=n();return i}function g(t,e){if(!x(t,e)){var n=w(t,"class").trim(),i=(n+" "+e).trim();w(t,"class",i)}}function m(t,e){var n=new RegExp("\\s*\\b"+e+"\\b\\s*","g"),i=w(t,"class").replace(n," ").trim();w(t,"class",i)}function x(t,e){return new RegExp("\\b"+e+"\\b").test(w(t,"class"))}function w(t,e,n){return"undefined"==typeof n?t.getAttribute(e)||"":void t.setAttribute(e,n)}function y(t,e,n){var i=arguments.length<=3||void 0===arguments[3]?!1:arguments[3];t.addEventListener(e,n,i)}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={props:{autoResize:{"default":!0},interval:{"default":200,validator:function(t){return t>=0}},align:{"default":"left",validator:function(t){return~["left","right","center"].indexOf(t)}},line:{"default":"v",validator:function(t){return~["v","h"].indexOf(t)}},lineGap:{required:!0,validator:function(t){return t>=0}},minLineGap:{validator:function(t){return t>=0}},maxLineGap:{validator:function(t){return t>=0}},singleMaxWidth:{validator:function(t){return t>=0}},fixedHeight:{"default":!1},watch:{"default":{}}},data:function(){return{style:{height:"",overflow:""}}},methods:{autoResizeHandler:n,reflowHandler:r(),reflow:o},events:{"wf-reflow":function(){this.reflowHandler()}},created:function(){this.virtualStyles=[]},ready:function(){var t=this;this.autoResizeHandler(),this.$watch("autoResize",this.autoResizeHandler),this.$watch(function(){return t.align,t.line,t.lineGap,t.minLineGap,t.maxLineGap,t.singleMaxWidth,t.fixedHeight,t.watch},this.reflowHandler),y(this.$el,M,i,!0)}};var b=void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend,M=b?"webkitTransitionEnd":"transitionend",G=function(){function t(t,n,i,r){var o=t.$el.clientWidth,a=e(o,n),s=v(0,a.count);i.forEach(function(t,e){var i=s.reduce(function(t,e,n){return e<s[t]?n:t},0),o=r[e];o.top=s[i],o.left=a.left+a.width*i,o.width=a.width,o.height=t.height*(n.fixedHeight?1:a.width/t.width),s[i]=s[i]+o.height}),t.style.height=Math.max.apply(null,s)+"px"}function e(t,e){var n=t/e.lineGap,i=void 0;if(e.singleMaxWidth>=t)n=1,i=Math.max(t,e.minLineGap);else{var r=e.maxLineGap*~~n,o=e.minLineGap*~~(n+1),a=r>=t,s=t>=o;a&&s?(n=Math.round(n),i=t/n):a?(n=~~n,i=t/n):s?(n=~~(n+1),i=t/n):(n=~~n,i=e.maxLineGap),1===n&&(i=Math.min(t,e.singleMaxWidth),i=Math.max(i,e.minLineGap))}return{width:i,count:n,left:u(t,i*n,e.align)}}return{calculate:t}}(),L=function(){function t(t,n,i,r){for(var o=t.$el.clientWidth,a=i.length,s=0,l=0;a>l;){for(var u,f,d=e(o,n,i,l),c=0,h=0;c<d.count;c++)u=i[l+c],f=r[l+c],f.top=s,f.left=d.left+h,f.width=u.width*d.height/u.height,f.height=d.height,h+=f.width;l+=d.count,s+=d.height}t.style.height=s+"px"}function e(t,e,o,a){var s=n(t,e.lineGap,o,a),l=Math.max(s-1,1),f=i(t,e,o,a,s),d=i(t,e,o,a,l),c=r(d,f,t),h=c.height,p=c.width;return(1===c.count||e.singleMaxWidth>=t)&&(p=Math.min(e.singleMaxWidth,t),h=o[a].height*p/o[a].width),{left:u(t,p,e.align),count:c.count,height:h}}function n(t,e,n,i){for(var r=0,o=i,a=0;o<n.length&&t>=a;o++)a+=n[o].width*e/n[o].height,r++;return r}function i(t,e,n,i,r){for(var o=0,a=r-1;a>=0;a--){var s=n[i+a];o+=s.width*e.lineGap/s.height}var l=e.lineGap*t/o,u=l<=e.maxLineGap&&l>=e.minLineGap;if(u)return{cost:Math.abs(e.lineGap-l),count:r,width:t,height:l};var f=o>t?e.minLineGap:e.maxLineGap;return{cost:1/0,count:r,width:o*f/e.lineGap,height:f}}function r(t,e,n){return t.cost===1/0&&e.cost===1/0?e.width<n?e:t:e.cost>=t.cost?t:e}return{calculate:t}}()},function(t,e){t.exports="<div class=vue-waterfall :style=style><slot></slot></div>"},function(t,e,n){var i,r;n(9),i=n(11),r=n(12),t.exports=i||{},t.exports.__esModule&&(t.exports=t.exports["default"]),r&&(("function"==typeof t.exports?t.exports.options||(t.exports.options={}):t.exports).template=r)},function(t,e,n){var i=n(10);"string"==typeof i&&(i=[[t.id,i,""]]);n(5)(i,{});i.locals&&(t.exports=i.locals)},function(t,e,n){e=t.exports=n(4)(),e.push([t.id,".vue-waterfall-slot{position:absolute;margin:0;padding:0;box-sizing:border-box}",""])},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={data:function(){return{isShow:!1}},props:{width:{required:!0,validator:function(t){return t>=0}},height:{required:!0,validator:function(t){return t>=0}},order:{"default":0},moveClass:{"default":""}},methods:{notify:function(){this.$dispatch("wf-reflow",[this])},getMeta:function(){return{node:this.$el,order:this.order,width:this.width,height:this.height,moveClass:this.moveClass}}},compiled:function(){var t=this;this.$watch("width, height",this.notify),this.$once("wf-reflowed",function(){return t.isShow=!0})},attached:function(){this.notify()},detached:function(){this.notify()}}},function(t,e){t.exports="<div class=vue-waterfall-slot v-show=isShow><slot></slot></div>"}])});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Waterfall=e():t.Waterfall=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}var r=n(1),o=i(r),a=n(8),s=i(a);t.exports={Waterfall:o["default"],WaterfallSlot:s["default"],waterfall:o["default"],waterfallSlot:s["default"]}},function(t,e,n){var i,r;n(2),i=n(6),r=n(7),t.exports=i||{},t.exports.__esModule&&(t.exports=t.exports["default"]),r&&(("function"==typeof t.exports?t.exports.options||(t.exports.options={}):t.exports).template=r)},function(t,e,n){var i=n(3);"string"==typeof i&&(i=[[t.id,i,""]]);n(5)(i,{});i.locals&&(t.exports=i.locals)},function(t,e,n){e=t.exports=n(4)(),e.push([t.id,".vue-waterfall{position:relative}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var n=this[e];n[2]?t.push("@media "+n[2]+"{"+n[1]+"}"):t.push(n[1])}return t.join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(i[o]=!0)}for(r=0;r<e.length;r++){var a=e[r];"number"==typeof a[0]&&i[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),t.push(a))}},t}},function(t,e,n){function i(t,e){for(var n=0;n<t.length;n++){var i=t[n],r=d[i.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](i.parts[o]);for(;o<i.parts.length;o++)r.parts.push(u(i.parts[o],e))}else{for(var a=[],o=0;o<i.parts.length;o++)a.push(u(i.parts[o],e));d[i.id]={id:i.id,refs:1,parts:a}}}}function r(t){for(var e=[],n={},i=0;i<t.length;i++){var r=t[i],o=r[0],a=r[1],s=r[2],u=r[3],l={css:a,media:s,sourceMap:u};n[o]?n[o].parts.push(l):e.push(n[o]={id:o,parts:[l]})}return e}function o(t,e){var n=p(),i=m[m.length-1];if("top"===t.insertAt)i?i.nextSibling?n.insertBefore(e,i.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),m.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(e)}}function a(t){t.parentNode.removeChild(t);var e=m.indexOf(t);e>=0&&m.splice(e,1)}function s(t){var e=document.createElement("style");return e.type="text/css",o(t,e),e}function u(t,e){var n,i,r;if(e.singleton){var o=g++;n=v||(v=s(e)),i=l.bind(null,n,o,!1),r=l.bind(null,n,o,!0)}else n=s(e),i=f.bind(null,n),r=function(){a(n)};return i(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;i(t=e)}else r()}}function l(t,e,n,i){var r=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=x(e,r);else{var o=document.createTextNode(r),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(o,a[e]):t.appendChild(o)}}function f(t,e){var n=e.css,i=e.media,r=e.sourceMap;if(i&&t.setAttribute("media",i),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var d={},c=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},h=c(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),p=c(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,g=0,m=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=h()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var n=r(t);return i(n,e),function(t){for(var o=[],a=0;a<n.length;a++){var s=n[a],u=d[s.id];u.refs--,o.push(u)}if(t){var l=r(t);i(l,e)}for(var a=0;a<o.length;a++){var u=o[a];if(0===u.refs){for(var f=0;f<u.parts.length;f++)u.parts[f]();delete d[u.id]}}}};var x=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){"use strict";function n(){this.autoResize?window.addEventListener("resize",this.reflowHandler,!1):window.removeEventListener("resize",this.reflowHandler,!1)}function i(t){var e=t.target,n=e[M];n&&m(e,n)}function r(t){return function(){clearTimeout(t),t=setTimeout(this.reflow,this.interval)}}function o(){var t=this,e=this.$el.clientWidth,n=this.$children.map(function(t){return t.getMeta()});n.sort(function(t,e){return t.order-e.order}),this.virtualRects=n.map(function(){return{}}),s(this,n,this.virtualRects),setTimeout(function(){a(t.$el,e)&&s(t,n,t.virtualRects),t.style.overflow="hidden",f(t.virtualRects,n),t.$broadcast("wf-reflowed",[t]),t.$dispatch("wf-reflowed",[t])},0)}function a(t,e){return e!==t.clientWidth}function s(t,e,n){var i=u(t),r="h"===t.line?C:L;r.calculate(t,i,e,n)}function u(t){return{align:~["left","right","center"].indexOf(t.align)?t.align:"left",line:~["v","h"].indexOf(t.line)?t.line:"v",lineGap:+t.lineGap,minLineGap:t.minLineGap?+t.minLineGap:t.lineGap,maxLineGap:t.maxLineGap?+t.maxLineGap:t.lineGap,singleMaxWidth:Math.max(t.singleMaxWidth||0,t.maxLineGap),fixedHeight:!!t.fixedHeight}}function l(t,e,n){switch(n){case"right":return t-e;case"center":return(t-e)/2;default:return 0}}function f(t,e){var n=e.filter(function(t){return t.moveClass}),i=d(n);c(t,e);var r=d(n);n.forEach(function(t,e){t.node[M]=t.moveClass,h(t.node,i[e],r[e])}),document.body.clientWidth,n.forEach(function(t){g(t.node,t.moveClass),p(t.node)})}function d(t){return t.map(function(t){return t.vm.rect})}function c(t,e){t.forEach(function(t,n){var i=e[n].node.style;e[n].vm.rect=t;for(var r in t)i[r]=t[r]+"px"})}function h(t,e,n){var i=e.left-n.left,r=e.top-n.top,o=e.width/n.width,a=e.height/n.height;t.style.transform=t.style.WebkitTransform="translate("+i+"px,"+r+"px) scale("+o+","+a+")",t.style.transitionDuration="0s"}function p(t){t.style.transform=t.style.WebkitTransform="",t.style.transitionDuration=""}function v(t,e){for(var n="function"==typeof t?function(){return t()}:function(){return t},i=[],r=0;e>r;r++)i[r]=n();return i}function g(t,e){if(!x(t,e)){var n=w(t,"class").trim(),i=(n+" "+e).trim();w(t,"class",i)}}function m(t,e){var n=new RegExp("\\s*\\b"+e+"\\b\\s*","g"),i=w(t,"class").replace(n," ").trim();w(t,"class",i)}function x(t,e){return new RegExp("\\b"+e+"\\b").test(w(t,"class"))}function w(t,e,n){return"undefined"==typeof n?t.getAttribute(e)||"":void t.setAttribute(e,n)}function y(t,e,n){var i=arguments.length<=3||void 0===arguments[3]?!1:arguments[3];t.addEventListener(e,n,i)}Object.defineProperty(e,"__esModule",{value:!0});var b=void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend,G=b?"webkitTransitionEnd":"transitionend",M="_wfMoveClass";e["default"]={props:{autoResize:{"default":!0},interval:{"default":200,validator:function(t){return t>=0}},align:{"default":"left",validator:function(t){return~["left","right","center"].indexOf(t)}},line:{"default":"v",validator:function(t){return~["v","h"].indexOf(t)}},lineGap:{required:!0,validator:function(t){return t>=0}},minLineGap:{validator:function(t){return t>=0}},maxLineGap:{validator:function(t){return t>=0}},singleMaxWidth:{validator:function(t){return t>=0}},fixedHeight:{"default":!1},watch:{"default":{}}},data:function(){return{style:{height:"",overflow:""}}},methods:{autoResizeHandler:n,reflowHandler:r(),reflow:o},events:{"wf-reflow":function(){this.reflowHandler()}},compiled:function(){this.virtualRects=[]},ready:function(){var t=this;this.autoResizeHandler(),this.$watch("autoResize",this.autoResizeHandler),this.$watch(function(){return t.align,t.line,t.lineGap,t.minLineGap,t.maxLineGap,t.singleMaxWidth,t.fixedHeight,t.watch},this.reflowHandler),y(this.$el,G,i,!0)}};var L=function(){function t(t,n,i,r){var o=t.$el.clientWidth,a=e(o,n),s=v(0,a.count);i.forEach(function(t,e){var i=s.reduce(function(t,e,n){return e<s[t]?n:t},0),o=r[e];o.top=s[i],o.left=a.left+a.width*i,o.width=a.width,o.height=t.height*(n.fixedHeight?1:a.width/t.width),s[i]=s[i]+o.height}),t.style.height=Math.max.apply(null,s)+"px"}function e(t,e){var n=t/e.lineGap,i=void 0;if(e.singleMaxWidth>=t)n=1,i=Math.max(t,e.minLineGap);else{var r=e.maxLineGap*~~n,o=e.minLineGap*~~(n+1),a=r>=t,s=t>=o;a&&s?(n=Math.round(n),i=t/n):a?(n=~~n,i=t/n):s?(n=~~(n+1),i=t/n):(n=~~n,i=e.maxLineGap),1===n&&(i=Math.min(t,e.singleMaxWidth),i=Math.max(i,e.minLineGap))}return{width:i,count:n,left:l(t,i*n,e.align)}}return{calculate:t}}(),C=function(){function t(t,n,i,r){for(var o=t.$el.clientWidth,a=i.length,s=0,u=0;a>u;){for(var l,f,d=e(o,n,i,u),c=0,h=0;c<d.count;c++)l=i[u+c],f=r[u+c],f.top=s,f.left=d.left+h,f.width=l.width*d.height/l.height,f.height=d.height,h+=f.width;u+=d.count,s+=d.height}t.style.height=s+"px"}function e(t,e,o,a){var s=n(t,e.lineGap,o,a),u=Math.max(s-1,1),f=i(t,e,o,a,s),d=i(t,e,o,a,u),c=r(d,f,t),h=c.height,p=c.width;return(1===c.count||e.singleMaxWidth>=t)&&(p=Math.min(e.singleMaxWidth,t),h=o[a].height*p/o[a].width),{left:l(t,p,e.align),count:c.count,height:h}}function n(t,e,n,i){for(var r=0,o=i,a=0;o<n.length&&t>=a;o++)a+=n[o].width*e/n[o].height,r++;return r}function i(t,e,n,i,r){for(var o=0,a=r-1;a>=0;a--){var s=n[i+a];o+=s.width*e.lineGap/s.height}var u=e.lineGap*t/o,l=u<=e.maxLineGap&&u>=e.minLineGap;if(l)return{cost:Math.abs(e.lineGap-u),count:r,width:t,height:u};var f=o>t?e.minLineGap:e.maxLineGap;return{cost:1/0,count:r,width:o*f/e.lineGap,height:f}}function r(t,e,n){return t.cost===1/0&&e.cost===1/0?e.width<n?e:t:e.cost>=t.cost?t:e}return{calculate:t}}()},function(t,e){t.exports="<div class=vue-waterfall :style=style><slot></slot></div>"},function(t,e,n){var i,r;n(9),i=n(11),r=n(12),t.exports=i||{},t.exports.__esModule&&(t.exports=t.exports["default"]),r&&(("function"==typeof t.exports?t.exports.options||(t.exports.options={}):t.exports).template=r)},function(t,e,n){var i=n(10);"string"==typeof i&&(i=[[t.id,i,""]]);n(5)(i,{});i.locals&&(t.exports=i.locals)},function(t,e,n){e=t.exports=n(4)(),e.push([t.id,".vue-waterfall-slot{position:absolute;margin:0;padding:0;box-sizing:border-box}",""])},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={data:function(){return{isShow:!1}},props:{width:{required:!0,validator:function(t){return t>=0}},height:{required:!0,validator:function(t){return t>=0}},order:{"default":0},moveClass:{"default":""}},methods:{notify:function(){this.$dispatch("wf-reflow",[this])},getMeta:function(){return{vm:this,node:this.$el,order:this.order,width:this.width,height:this.height,moveClass:this.moveClass}}},compiled:function(){var t=this;this.$watch("width, height",this.notify),this.$once("wf-reflowed",function(){return t.isShow=!0}),this.rect={top:0,left:0,width:0,height:0}},attached:function(){this.notify()},detached:function(){this.notify()}}},function(t,e){t.exports="<div class=vue-waterfall-slot v-show=isShow><slot></slot></div>"}])});
\ No newline at end of file
diff --git a/lib/waterfall-slot.vue b/lib/waterfall-slot.vue
index 22bc1b9..d58d1a0 100644
--- a/lib/waterfall-slot.vue
+++ b/lib/waterfall-slot.vue
@@ -41,6 +41,7 @@ export default {
     },
     getMeta () {
       return {
+        vm: this,
         node: this.$el,
         order: this.order,
         width: this.width,
@@ -52,6 +53,12 @@ export default {
   compiled () {
     this.$watch('width, height', this.notify)
     this.$once('wf-reflowed', () => this.isShow = true)
+    this.rect = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    }
   },
   attached () {
     this.notify()
diff --git a/lib/waterfall.vue b/lib/waterfall.vue
index d2a24b9..67a9882 100644
--- a/lib/waterfall.vue
+++ b/lib/waterfall.vue
@@ -13,6 +13,18 @@
 
 <script>
 
+// https://github.com/vuejs/vue/blob/dev/src/util/env.js
+const isWebkitTrans =
+  window.ontransitionend === undefined &&
+  window.onwebkittransitionend !== undefined
+
+// https://github.com/vuejs/vue/blob/dev/src/util/env.js
+const transitionEndEvent = isWebkitTrans
+  ? 'webkitTransitionEnd'
+  : 'transitionend'
+
+const MOVE_CLASS_PROP = '_wfMoveClass'
+
 export default {
   props: {
     autoResize: {
@@ -66,8 +78,8 @@ export default {
       this.reflowHandler()
     }
   },
-  created () {
-    this.virtualStyles = []
+  compiled () {
+    this.virtualRects = []
   },
   ready () {
     this.autoResizeHandler()
@@ -86,16 +98,6 @@ export default {
   }
 }
 
-// https://github.com/vuejs/vue/blob/dev/src/util/env.js
-const isWebkitTrans =
-  window.ontransitionend === undefined &&
-  window.onwebkittransitionend !== undefined
-
-// https://github.com/vuejs/vue/blob/dev/src/util/env.js
-const transitionEndEvent = isWebkitTrans
-  ? 'webkitTransitionEnd'
-  : 'transitionend'
-
 function autoResizeHandler () {
   if (this.autoResize) {
     window.addEventListener('resize', this.reflowHandler, false)
@@ -106,8 +108,9 @@ function autoResizeHandler () {
 
 function tidyUpAnimations (event) {
   let node = event.target
-  if (node._wfMoveClass) {
-    removeClass(node, node._wfMoveClass)
+  let moveClass = node[MOVE_CLASS_PROP]
+  if (moveClass) {
+    removeClass(node, moveClass)
   }
 }
 
@@ -122,14 +125,14 @@ function reflow () {
   let width = this.$el.clientWidth
   let metas = this.$children.map((slot) => slot.getMeta())
   metas.sort((a, b) => a.order - b.order)
-  this.virtualStyles = metas.map(() => ({}))
-  calculate(this, metas, this.virtualStyles)
+  this.virtualRects = metas.map(() => ({}))
+  calculate(this, metas, this.virtualRects)
   setTimeout(() => {
     if (isScrollBarVisibilityChange(this.$el, width)) {
-      calculate(this, metas, this.virtualStyles)
+      calculate(this, metas, this.virtualRects)
     }
     this.style.overflow = 'hidden'
-    render(this.virtualStyles, metas)
+    render(this.virtualRects, metas)
     this.$broadcast('wf-reflowed', [this])
     this.$dispatch('wf-reflowed', [this])
   }, 0)
@@ -159,18 +162,18 @@ function getOptions (vm) {
 
 var verticalLineProcessor = (() => {
 
-  function calculate (vm, options, metas, styles) {
+  function calculate (vm, options, metas, rects) {
     let width = vm.$el.clientWidth
     let strategy = getRowStrategy(width, options)
     let tops = getArrayFillWith(0, strategy.count)
     metas.forEach((meta, index) => {
       let offset = tops.reduce((last, top, i) => top < tops[last] ? i : last, 0)
-      let style = styles[index]
-      style.top = tops[offset]
-      style.left = strategy.left + strategy.width * offset
-      style.width = strategy.width
-      style.height = meta.height * (options.fixedHeight ? 1 : strategy.width / meta.width)
-      tops[offset] = tops[offset] + style.height
+      let rect = rects[index]
+      rect.top = tops[offset]
+      rect.left = strategy.left + strategy.width * offset
+      rect.width = strategy.width
+      rect.height = meta.height * (options.fixedHeight ? 1 : strategy.width / meta.width)
+      tops[offset] = tops[offset] + rect.height
     })
     vm.style.height = Math.max.apply(null, tops) + 'px'
   }
@@ -219,21 +222,21 @@ var verticalLineProcessor = (() => {
 
 var horizontalLineProcessor = (() => {
 
-  function calculate (vm, options, metas, styles) {
+  function calculate (vm, options, metas, rects) {
     let width = vm.$el.clientWidth
     let total = metas.length
     let top = 0
     let offset = 0
     while (offset < total) {
       let strategy = getRowStrategy(width, options, metas, offset)
-      for (let i = 0, left = 0, meta, style; i < strategy.count; i++) {
+      for (let i = 0, left = 0, meta, rect; i < strategy.count; i++) {
         meta = metas[offset + i]
-        style = styles[offset + i]
-        style.top = top
-        style.left = strategy.left + left
-        style.width = meta.width * strategy.height / meta.height
-        style.height = strategy.height
-        left += style.width
+        rect = rects[offset + i]
+        rect.top = top
+        rect.left = strategy.left + left
+        rect.width = meta.width * strategy.height / meta.height
+        rect.height = strategy.height
+        left += rect.width
       }
       offset += strategy.count
       top += strategy.height
@@ -320,13 +323,13 @@ function getLeft (width, contentWidth, align) {
   }
 }
 
-function render (styles, metas) {
+function render (rects, metas) {
   let metasNeedToMoveByTransform = metas.filter((meta) => meta.moveClass)
   let firstRects = getRects(metasNeedToMoveByTransform)
-  applyStyles(styles, metas)
+  applyRects(rects, metas)
   let lastRects = getRects(metasNeedToMoveByTransform)
   metasNeedToMoveByTransform.forEach((meta, i) => {
-    meta.node._wfMoveClass = meta.moveClass
+    meta.node[MOVE_CLASS_PROP] = meta.moveClass
     setTransform(meta.node, firstRects[i], lastRects[i])
   })
   document.body.clientWidth // forced reflow
@@ -337,14 +340,15 @@ function render (styles, metas) {
 }
 
 function getRects (metas) {
-  return metas.map((meta) => meta.node.getBoundingClientRect())
+  return metas.map((meta) => meta.vm.rect)
 }
 
-function applyStyles (styles, metas) {
-  styles.forEach((srcStyle, i) => {
+function applyRects (rects, metas) {
+  rects.forEach((rect, i) => {
     let style = metas[i].node.style
-    for (let prop in srcStyle) {
-      style[prop] = srcStyle[prop] + 'px'
+    metas[i].vm.rect = rect
+    for (let prop in rect) {
+      style[prop] = rect[prop] + 'px'
     }
   })
 }
diff --git a/package.json b/package.json
index 232320d..d911577 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-waterfall",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A waterfall layout component for Vue.js",
   "main": "lib/vue-waterfall.min.js",
   "files": [
diff --git a/src/waterfall-slot.vue b/src/waterfall-slot.vue
index 22bc1b9..d58d1a0 100644
--- a/src/waterfall-slot.vue
+++ b/src/waterfall-slot.vue
@@ -41,6 +41,7 @@ export default {
     },
     getMeta () {
       return {
+        vm: this,
         node: this.$el,
         order: this.order,
         width: this.width,
@@ -52,6 +53,12 @@ export default {
   compiled () {
     this.$watch('width, height', this.notify)
     this.$once('wf-reflowed', () => this.isShow = true)
+    this.rect = {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0
+    }
   },
   attached () {
     this.notify()
diff --git a/src/waterfall.vue b/src/waterfall.vue
index d2a24b9..67a9882 100644
--- a/src/waterfall.vue
+++ b/src/waterfall.vue
@@ -13,6 +13,18 @@
 
 <script>
 
+// https://github.com/vuejs/vue/blob/dev/src/util/env.js
+const isWebkitTrans =
+  window.ontransitionend === undefined &&
+  window.onwebkittransitionend !== undefined
+
+// https://github.com/vuejs/vue/blob/dev/src/util/env.js
+const transitionEndEvent = isWebkitTrans
+  ? 'webkitTransitionEnd'
+  : 'transitionend'
+
+const MOVE_CLASS_PROP = '_wfMoveClass'
+
 export default {
   props: {
     autoResize: {
@@ -66,8 +78,8 @@ export default {
       this.reflowHandler()
     }
   },
-  created () {
-    this.virtualStyles = []
+  compiled () {
+    this.virtualRects = []
   },
   ready () {
     this.autoResizeHandler()
@@ -86,16 +98,6 @@ export default {
   }
 }
 
-// https://github.com/vuejs/vue/blob/dev/src/util/env.js
-const isWebkitTrans =
-  window.ontransitionend === undefined &&
-  window.onwebkittransitionend !== undefined
-
-// https://github.com/vuejs/vue/blob/dev/src/util/env.js
-const transitionEndEvent = isWebkitTrans
-  ? 'webkitTransitionEnd'
-  : 'transitionend'
-
 function autoResizeHandler () {
   if (this.autoResize) {
     window.addEventListener('resize', this.reflowHandler, false)
@@ -106,8 +108,9 @@ function autoResizeHandler () {
 
 function tidyUpAnimations (event) {
   let node = event.target
-  if (node._wfMoveClass) {
-    removeClass(node, node._wfMoveClass)
+  let moveClass = node[MOVE_CLASS_PROP]
+  if (moveClass) {
+    removeClass(node, moveClass)
   }
 }
 
@@ -122,14 +125,14 @@ function reflow () {
   let width = this.$el.clientWidth
   let metas = this.$children.map((slot) => slot.getMeta())
   metas.sort((a, b) => a.order - b.order)
-  this.virtualStyles = metas.map(() => ({}))
-  calculate(this, metas, this.virtualStyles)
+  this.virtualRects = metas.map(() => ({}))
+  calculate(this, metas, this.virtualRects)
   setTimeout(() => {
     if (isScrollBarVisibilityChange(this.$el, width)) {
-      calculate(this, metas, this.virtualStyles)
+      calculate(this, metas, this.virtualRects)
     }
     this.style.overflow = 'hidden'
-    render(this.virtualStyles, metas)
+    render(this.virtualRects, metas)
     this.$broadcast('wf-reflowed', [this])
     this.$dispatch('wf-reflowed', [this])
   }, 0)
@@ -159,18 +162,18 @@ function getOptions (vm) {
 
 var verticalLineProcessor = (() => {
 
-  function calculate (vm, options, metas, styles) {
+  function calculate (vm, options, metas, rects) {
     let width = vm.$el.clientWidth
     let strategy = getRowStrategy(width, options)
     let tops = getArrayFillWith(0, strategy.count)
     metas.forEach((meta, index) => {
       let offset = tops.reduce((last, top, i) => top < tops[last] ? i : last, 0)
-      let style = styles[index]
-      style.top = tops[offset]
-      style.left = strategy.left + strategy.width * offset
-      style.width = strategy.width
-      style.height = meta.height * (options.fixedHeight ? 1 : strategy.width / meta.width)
-      tops[offset] = tops[offset] + style.height
+      let rect = rects[index]
+      rect.top = tops[offset]
+      rect.left = strategy.left + strategy.width * offset
+      rect.width = strategy.width
+      rect.height = meta.height * (options.fixedHeight ? 1 : strategy.width / meta.width)
+      tops[offset] = tops[offset] + rect.height
     })
     vm.style.height = Math.max.apply(null, tops) + 'px'
   }
@@ -219,21 +222,21 @@ var verticalLineProcessor = (() => {
 
 var horizontalLineProcessor = (() => {
 
-  function calculate (vm, options, metas, styles) {
+  function calculate (vm, options, metas, rects) {
     let width = vm.$el.clientWidth
     let total = metas.length
     let top = 0
     let offset = 0
     while (offset < total) {
       let strategy = getRowStrategy(width, options, metas, offset)
-      for (let i = 0, left = 0, meta, style; i < strategy.count; i++) {
+      for (let i = 0, left = 0, meta, rect; i < strategy.count; i++) {
         meta = metas[offset + i]
-        style = styles[offset + i]
-        style.top = top
-        style.left = strategy.left + left
-        style.width = meta.width * strategy.height / meta.height
-        style.height = strategy.height
-        left += style.width
+        rect = rects[offset + i]
+        rect.top = top
+        rect.left = strategy.left + left
+        rect.width = meta.width * strategy.height / meta.height
+        rect.height = strategy.height
+        left += rect.width
       }
       offset += strategy.count
       top += strategy.height
@@ -320,13 +323,13 @@ function getLeft (width, contentWidth, align) {
   }
 }
 
-function render (styles, metas) {
+function render (rects, metas) {
   let metasNeedToMoveByTransform = metas.filter((meta) => meta.moveClass)
   let firstRects = getRects(metasNeedToMoveByTransform)
-  applyStyles(styles, metas)
+  applyRects(rects, metas)
   let lastRects = getRects(metasNeedToMoveByTransform)
   metasNeedToMoveByTransform.forEach((meta, i) => {
-    meta.node._wfMoveClass = meta.moveClass
+    meta.node[MOVE_CLASS_PROP] = meta.moveClass
     setTransform(meta.node, firstRects[i], lastRects[i])
   })
   document.body.clientWidth // forced reflow
@@ -337,14 +340,15 @@ function render (styles, metas) {
 }
 
 function getRects (metas) {
-  return metas.map((meta) => meta.node.getBoundingClientRect())
+  return metas.map((meta) => meta.vm.rect)
 }
 
-function applyStyles (styles, metas) {
-  styles.forEach((srcStyle, i) => {
+function applyRects (rects, metas) {
+  rects.forEach((rect, i) => {
     let style = metas[i].node.style
-    for (let prop in srcStyle) {
-      style[prop] = srcStyle[prop] + 'px'
+    metas[i].vm.rect = rect
+    for (let prop in rect) {
+      style[prop] = rect[prop] + 'px'
     }
   })
 }