Add Masonry to key silk cases.

tools/perf/page_sets/key_silk_cases/masonry.html

Index: tools/perf/page_sets/key_silk_cases/masonry.html
diff --git a/tools/perf/page_sets/key_silk_cases/masonry.html b/tools/perf/page_sets/key_silk_cases/masonry.html
new file mode 100644
index 0000000000000000000000000000000000000000..ac9fa2ada677356a7ad0e174bb19d8bac43fffc5
--- /dev/null
+++ b/tools/perf/page_sets/key_silk_cases/masonry.html
@@ -0,0 +1,1136 @@
+<style>
+body {
+  display: none;
+  margin: 0;
+}
+.item {
+  max-width: 200px;
+  border: 2px solid red;
+  margin: 1px;
+}
+</style>
+<div id=container>
+<div class=item>Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatevelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpa qui officia deserunt mollit anim id estlaborum.</div>
+</div>
+<script>
+/*!
+ * Masonry PACKAGED v3.2.2
+ * Cascading grid layout library
+ * http://masonry.desandro.com
+ * MIT License
+ * by David DeSandro
+ */
+! function(a) {
+    function b() {}
+
+    function c(a) {
+        function c(b) {
+            b.prototype.option || (b.prototype.option = function(b) {
+                a.isPlainObject(b) && (this.options = a.extend(!0, this.options,
+                      b))
+            })
+        }
+
+        function e(b, c) {
+            a.fn[b] = function(e) {
+                if ("string" == typeof e) {
+                    for (var g = d.call(arguments, 1), h = 0, i = this.length; i
+                        > h; h++) {
+                        var j = this[h],
+                            k = a.data(j, b);
+                        if (k)
+                            if (a.isFunction(k[e]) && "_" !== e.charAt(0)) {
+                                var l = k[e].apply(k, g);
+                                if (void 0 !== l) return l
+                            } else f("no such method '" + e + "' for " + b +
+                                " instance");
+                        else f("cannot call methods on " + b +
+                            " prior to initialization; attempted to call '" +
+                            e + "'")
+                    }
+                    return this
+                }
+                return this.each(function() {
+                    var d = a.data(this, b);
+                    d ? (d.option(e), d._init()) : (d = new c(this, e),
+                        a.data(this, b, d))
+                })
+            }
+        }
+        if (a) {
+            var f = "undefined" == typeof console ? b : function(a) {
+                console.error(a)
+            };
+            return a.bridget = function(a, b) {
+                c(b), e(a, b)
+            }, a.bridget
+        }
+    }
+    var d = Array.prototype.slice;
+    "function" == typeof define && define.amd ?
+      define("jquery-bridget/jquery.bridget", ["jquery"], c) : c("object" ==
+          typeof exports ? require("jquery") : a.jQuery)
+}(window),
+function(a) {
+    function b(b) {
+        var c = a.event;
+        return c.target = c.target || c.srcElement || b, c
+    }
+    var c = document.documentElement,
+        d = function() {};
+    c.addEventListener ? d = function(a, b, c) {
+        a.addEventListener(b, c, !1)
+    } : c.attachEvent && (d = function(a, c, d) {
+        a[c + d] = d.handleEvent ? function() {
+            var c = b(a);
+            d.handleEvent.call(d, c)
+        } : function() {
+            var c = b(a);
+            d.call(a, c)
+        }, a.attachEvent("on" + c, a[c + d])
+    });
+    var e = function() {};
+    c.removeEventListener ? e = function(a, b, c) {
+        a.removeEventListener(b, c, !1)
+    } : c.detachEvent && (e = function(a, b, c) {
+        a.detachEvent("on" + b, a[b + c]);
+        try {
+            delete a[b + c]
+        } catch (d) {
+            a[b + c] = void 0
+        }
+    });
+    var f = {
+        bind: d,
+        unbind: e
+    };
+    "function" == typeof define && define.amd ? define("eventie/eventie", f) :
+      "object" == typeof exports ? module.exports = f : a.eventie = f
+}(this),
+function(a) {
+    function b(a) {
+        "function" == typeof a && (b.isReady ? a() : g.push(a))
+    }
+
+    function c(a) {
+        var c = "readystatechange" === a.type && "complete" !== f.readyState;
+        b.isReady || c || d()
+    }
+
+    function d() {
+        b.isReady = !0;
+        for (var a = 0, c = g.length; c > a; a++) {
+            var d = g[a];
+            d()
+        }
+    }
+
+    function e(e) {
+        return "complete" === f.readyState ? d() : (e.bind(f,
+              "DOMContentLoaded", c), e.bind(f, "readystatechange", c),
+            e.bind(a, "load", c)), b
+    }
+    var f = a.document,
+        g = [];
+    b.isReady = !1, "function" == typeof define && define.amd ?
+      define("doc-ready/doc-ready", ["eventie/eventie"], e) : "object" == typeof
+      exports ? module.exports = e(require("eventie")) : a.docReady =
+      e(a.eventie)
+}(window),
+function() {
+    function a() {}
+
+    function b(a, b) {
+        for (var c = a.length; c--;)
+            if (a[c].listener === b) return c;
+        return -1
+    }
+
+    function c(a) {
+        return function() {
+            return this[a].apply(this, arguments)
+        }
+    }
+    var d = a.prototype,
+        e = this,
+        f = e.EventEmitter;
+    d.getListeners = function(a) {
+        var b, c, d = this._getEvents();
+        if (a instanceof RegExp) {
+            b = {};
+            for (c in d) d.hasOwnProperty(c) && a.test(c) && (b[c] = d[c])
+        } else b = d[a] || (d[a] = []);
+        return b
+    }, d.flattenListeners = function(a) {
+        var b, c = [];
+        for (b = 0; b < a.length; b += 1) c.push(a[b].listener);
+        return c
+    }, d.getListenersAsObject = function(a) {
+        var b, c = this.getListeners(a);
+        return c instanceof Array && (b = {}, b[a] = c), b || c
+    }, d.addListener = function(a, c) {
+        var d, e = this.getListenersAsObject(a),
+            f = "object" == typeof c;
+        for (d in e) e.hasOwnProperty(d) && -1 === b(e[d], c) && e[d].push(f ? c
+            : {
+            listener: c,
+            once: !1
+        });
+        return this
+    }, d.on = c("addListener"), d.addOnceListener = function(a, b) {
+        return this.addListener(a, {
+            listener: b,
+            once: !0
+        })
+    }, d.once = c("addOnceListener"), d.defineEvent = function(a) {
+        return this.getListeners(a), this
+    }, d.defineEvents = function(a) {
+        for (var b = 0; b < a.length; b += 1) this.defineEvent(a[b]);
+        return this
+    }, d.removeListener = function(a, c) {
+        var d, e, f = this.getListenersAsObject(a);
+        for (e in f) f.hasOwnProperty(e) && (d = b(f[e], c), -1 !== d &&
+            f[e].splice(d, 1));
+        return this
+    }, d.off = c("removeListener"), d.addListeners = function(a, b) {
+        return this.manipulateListeners(!1, a, b)
+    }, d.removeListeners = function(a, b) {
+        return this.manipulateListeners(!0, a, b)
+    }, d.manipulateListeners = function(a, b, c) {
+        var d, e, f = a ? this.removeListener : this.addListener,
+            g = a ? this.removeListeners : this.addListeners;
+        if ("object" != typeof b || b instanceof RegExp)
+            for (d = c.length; d--;) f.call(this, b, c[d]);
+        else
+            for (d in b) b.hasOwnProperty(d) && (e = b[d]) && ("function" ==
+                typeof e ? f.call(this, d, e) : g.call(this, d, e));
+        return this
+    }, d.removeEvent = function(a) {
+        var b, c = typeof a,
+            d = this._getEvents();
+        if ("string" === c) delete d[a];
+        else if (a instanceof RegExp)
+            for (b in d) d.hasOwnProperty(b) && a.test(b) && delete d[b];
+        else delete this._events;
+        return this
+    }, d.removeAllListeners = c("removeEvent"), d.emitEvent = function(a, b) {
+        var c, d, e, f, g = this.getListenersAsObject(a);
+        for (e in g)
+            if (g.hasOwnProperty(e))
+                for (d = g[e].length; d--;) c = g[e][d], c.once === !0 &&
+                  this.removeListener(a, c.listener), f = c.listener.apply(this,
+                      b || []), f === this._getOnceReturnValue() &&
+                    this.removeListener(a, c.listener);
+        return this
+    }, d.trigger = c("emitEvent"), d.emit = function(a) {
+        var b = Array.prototype.slice.call(arguments, 1);
+        return this.emitEvent(a, b)
+    }, d.setOnceReturnValue = function(a) {
+        return this._onceReturnValue = a, this
+    }, d._getOnceReturnValue = function() {
+        return this.hasOwnProperty("_onceReturnValue") ? this._onceReturnValue :
+          !0
+    }, d._getEvents = function() {
+        return this._events || (this._events = {})
+    }, a.noConflict = function() {
+        return e.EventEmitter = f, a
+    }, "function" == typeof define && define.amd ?
+    define("eventEmitter/EventEmitter", [], function() {
+        return a
+    }) : "object" == typeof module && module.exports ? module.exports = a :
+    e.EventEmitter = a
+}.call(this),
+    function(a) {
+        function b(a) {
+            if (a) {
+                if ("string" == typeof d[a]) return a;
+                a = a.charAt(0).toUpperCase() + a.slice(1);
+                for (var b, e = 0, f = c.length; f > e; e++)
+                    if (b = c[e] + a, "string" == typeof d[b]) return b
+            }
+        }
+        var c = "Webkit Moz ms Ms O".split(" "),
+            d = document.documentElement.style;
+        "function" == typeof define && define.amd ?
+          define("get-style-property/get-style-property", [], function() {
+            return b
+        }) : "object" == typeof exports ? module.exports = b :
+        a.getStyleProperty = b
+    }(window),
+    function(a) {
+        function b(a) {
+            var b = parseFloat(a),
+                c = -1 === a.indexOf("%") && !isNaN(b);
+            return c && b
+        }
+
+        function c() {}
+
+        function d() {
+            for (var a = {
+                    width: 0,
+                    height: 0,
+                    innerWidth: 0,
+                    innerHeight: 0,
+                    outerWidth: 0,
+                    outerHeight: 0
+                }, b = 0, c = g.length; c > b; b++) {
+                var d = g[b];
+                a[d] = 0
+            }
+            return a
+        }
+
+        function e(c) {
+            function e() {
+                if (!m) {
+                    m = !0;
+                    var d = a.getComputedStyle;
+                    if (j = function() {
+                            var a = d ? function(a) {
+                                return d(a, null)
+                            } : function(a) {
+                                return a.currentStyle
+                            };
+                            return function(b) {
+                                var c = a(b);
+                                return c || f("Style returned " + c), c
+                            }
+                        }(), k = c("boxSizing")) {
+                        var e = document.createElement("div");
+                        e.style.width = "200px",
+                        e.style.padding = "1px 2px 3px 4px",
+                          e.style.borderStyle = "solid",
+                          e.style.borderWidth = "1px 2px 3px 4px", e.style[k] =
+                            "border-box";
+                        var g = document.body || document.documentElement;
+                        g.appendChild(e);
+                        var h = j(e);
+                        l = 200 === b(h.width), g.removeChild(e)
+                    }
+                }
+            }
+
+            function h(a) {
+                if (e(), "string" == typeof a && (a =
+                      document.querySelector(a)), a && "object" == typeof a &&
+                    a.nodeType) {
+                    var c = j(a);
+                    if ("none" === c.display) return d();
+                    var f = {};
+                    f.width = a.offsetWidth, f.height = a.offsetHeight;
+                    for (var h = f.isBorderBox = !(!k || !c[k] || "border-box"
+                          !== c[k]), m = 0, n = g.length; n > m; m++) {
+                        var o = g[m],
+                            p = c[o];
+                        p = i(a, p);
+                        var q = parseFloat(p);
+                        f[o] = isNaN(q) ? 0 : q
+                    }
+                    var r = f.paddingLeft + f.paddingRight,
+                        s = f.paddingTop + f.paddingBottom,
+                        t = f.marginLeft + f.marginRight,
+                        u = f.marginTop + f.marginBottom,
+                        v = f.borderLeftWidth + f.borderRightWidth,
+                        w = f.borderTopWidth + f.borderBottomWidth,
+                        x = h && l,
+                        y = b(c.width);
+                    y !== !1 && (f.width = y + (x ? 0 : r + v));
+                    var z = b(c.height);
+                    return z !== !1 && (f.height = z + (x ? 0 : s + w)),
+                    f.innerWidth = f.width - (r + v), f.innerHeight = f.height -
+                      (s + w), f.outerWidth = f.width + t, f.outerHeight =
+                      f.height + u, f
+                }
+            }
+
+            function i(b, c) {
+                if (a.getComputedStyle || -1 === c.indexOf("%")) return c;
+                var d = b.style,
+                    e = d.left,
+                    f = b.runtimeStyle,
+                    g = f && f.left;
+                return g && (f.left = b.currentStyle.left), d.left = c, c =
+                  d.pixelLeft, d.left = e, g && (f.left = g), c
+            }
+            var j, k, l, m = !1;
+            return h
+        }
+        var f = "undefined" == typeof console ? c : function(a) {
+                console.error(a)
+            },
+            g = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom",
+          "marginLeft", "marginRight", "marginTop", "marginBottom",
+          "borderLeftWidth", "borderRightWidth", "borderTopWidth",
+          "borderBottomWidth"];
+        "function" == typeof define && define.amd ? define("get-size/get-size",
+            ["get-style-property/get-style-property"], e) : "object" == typeof
+          exports ? module.exports = e(require("desandro-get-style-property")) :
+          a.getSize = e(a.getStyleProperty)
+    }(window),
+    function(a) {
+        function b(a, b) {
+            return a[g](b)
+        }
+
+        function c(a) {
+            if (!a.parentNode) {
+                var b = document.createDocumentFragment();
+                b.appendChild(a)
+            }
+        }
+
+        function d(a, b) {
+            c(a);
+            for (var d = a.parentNode.querySelectorAll(b), e = 0, f = d.length;
+                f > e; e++)
+                if (d[e] === a) return !0;
+            return !1
+        }
+
+        function e(a, d) {
+            return c(a), b(a, d)
+        }
+        var f, g = function() {
+            if (a.matchesSelector) return "matchesSelector";
+            for (var b = ["webkit", "moz", "ms", "o"], c = 0, d = b.length; d >
+                c; c++) {
+                var e = b[c],
+                    f = e + "MatchesSelector";
+                if (a[f]) return f
+            }
+        }();
+        if (g) {
+            var h = document.createElement("div"),
+                i = b(h, "div");
+            f = i ? b : e
+        } else f = d;
+        "function" == typeof define && define.amd ?
+          define("matches-selector/matches-selector", [], function() {
+            return f
+        }) : "object" == typeof exports ? module.exports = f :
+        window.matchesSelector = f
+    }(Element.prototype),
+    function(a) {
+        function b(a, b) {
+            for (var c in b) a[c] = b[c];
+            return a
+        }
+
+        function c(a) {
+            for (var b in a) return !1;
+            return b = null, !0
+        }
+
+        function d(a) {
+            return a.replace(/([A-Z])/g, function(a) {
+                return "-" + a.toLowerCase()
+            })
+        }
+
+        function e(a, e, f) {
+            function h(a, b) {
+                a && (this.element = a, this.layout = b, this.position = {
+                    x: 0,
+                    y: 0
+                }, this._create())
+            }
+            var i = f("transition"),
+                j = f("transform"),
+                k = i && j,
+                l = !!f("perspective"),
+                m = {
+                    WebkitTransition: "webkitTransitionEnd",
+                    MozTransition: "transitionend",
+                    OTransition: "otransitionend",
+                    transition: "transitionend"
+                }[i],
+                n = ["transform", "transition", "transitionDuration",
+                  "transitionProperty"],
+                o = function() {
+                    for (var a = {}, b = 0, c = n.length; c > b; b++) {
+                        var d = n[b],
+                            e = f(d);
+                        e && e !== d && (a[d] = e)
+                    }
+                    return a
+                }();
+            b(h.prototype, a.prototype), h.prototype._create = function() {
+                this._transn = {
+                    ingProperties: {},
+                    clean: {},
+                    onEnd: {}
+                }, this.css({
+                    position: "absolute"
+                })
+            }, h.prototype.handleEvent = function(a) {
+                var b = "on" + a.type;
+                this[b] && this[b](a)
+            }, h.prototype.getSize = function() {
+                this.size = e(this.element)
+            }, h.prototype.css = function(a) {
+                var b = this.element.style;
+                for (var c in a) {
+                    var d = o[c] || c;
+                    b[d] = a[c]
+                }
+            }, h.prototype.getPosition = function() {
+                var a = g(this.element),
+                    b = this.layout.options,
+                    c = b.isOriginLeft,
+                    d = b.isOriginTop,
+                    e = parseInt(a[c ? "left" : "right"], 10),
+                    f = parseInt(a[d ? "top" : "bottom"], 10);
+                e = isNaN(e) ? 0 : e, f = isNaN(f) ? 0 : f;
+                var h = this.layout.size;
+                e -= c ? h.paddingLeft : h.paddingRight, f -= d ? h.paddingTop :
+                  h.paddingBottom, this.position.x = e, this.position.y = f
+            }, h.prototype.layoutPosition = function() {
+                var a = this.layout.size,
+                    b = this.layout.options,
+                    c = {};
+                b.isOriginLeft ? (c.left = this.position.x + a.paddingLeft +
+                    "px", c.right = "") : (c.right = this.position.x +
+                      a.paddingRight + "px", c.left = ""), b.isOriginTop ?
+                    (c.top = this.position.y + a.paddingTop + "px", c.bottom =
+                     "") : (c.bottom = this.position.y + a.paddingBottom + "px",
+                       c.top = ""), this.css(c), this.emitEvent("layout",
+                         [this])
+            };
+            var p = l ? function(a, b) {
+                return "translate3d(" + a + "px, " + b + "px, 0)"
+            } : function(a, b) {
+                return "translate(" + a + "px, " + b + "px)"
+            };
+            h.prototype._transitionTo = function(a, b) {
+                this.getPosition();
+                var c = this.position.x,
+                    d = this.position.y,
+                    e = parseInt(a, 10),
+                    f = parseInt(b, 10),
+                    g = e === this.position.x && f === this.position.y;
+                if (this.setPosition(a, b), g && !this.isTransitioning) return
+                  void this.layoutPosition();
+                var h = a - c,
+                    i = b - d,
+                    j = {},
+                    k = this.layout.options;
+                h = k.isOriginLeft ? h : -h, i = k.isOriginTop ? i : -i,
+                j.transform = p(h, i), this.transition({
+                    to: j,
+                    onTransitionEnd: {
+                        transform: this.layoutPosition
+                    },
+                    isCleaning: !0
+                })
+            }, h.prototype.goTo = function(a, b) {
+                this.setPosition(a, b), this.layoutPosition()
+            }, h.prototype.moveTo = k ? h.prototype._transitionTo :
+            h.prototype.goTo, h.prototype.setPosition = function(a, b) {
+                this.position.x = parseInt(a, 10), this.position.y = parseInt(b,
+                    10)
+            }, h.prototype._nonTransition = function(a) {
+                this.css(a.to), a.isCleaning && this._removeStyles(a.to);
+                for (var b in a.onTransitionEnd) a.onTransitionEnd[b].call(this)
+            }, h.prototype._transition = function(a) {
+                if (!parseFloat(this.layout.options.transitionDuration)) return
+                  void this._nonTransition(a);
+                var b = this._transn;
+                for (var c in a.onTransitionEnd) b.onEnd[c] =
+                  a.onTransitionEnd[c];
+                for (c in a.to) b.ingProperties[c] = !0, a.isCleaning &&
+                  (b.clean[c] = !0);
+                if (a.from) {
+                    this.css(a.from);
+                    var d = this.element.offsetHeight;
+                    d = null
+                }
+                this.enableTransition(a.to), this.css(a.to),
+                this.isTransitioning = !0
+            };
+            var q = j && d(j) + ",opacity";
+            h.prototype.enableTransition = function() {
+                this.isTransitioning || (this.css({
+                    transitionProperty: q,
+                    transitionDuration: this.layout.options.transitionDuration
+                }), this.element.addEventListener(m, this, !1))
+            }, h.prototype.transition = h.prototype[i ? "_transition" :
+            "_nonTransition"], h.prototype.onwebkitTransitionEnd = function(a) {
+                this.ontransitionend(a)
+            }, h.prototype.onotransitionend = function(a) {
+                this.ontransitionend(a)
+            };
+            var r = {
+                "-webkit-transform": "transform",
+                "-moz-transform": "transform",
+                "-o-transform": "transform"
+            };
+            h.prototype.ontransitionend = function(a) {
+                if (a.target === this.element) {
+                    var b = this._transn,
+                        d = r[a.propertyName] || a.propertyName;
+                    if (delete b.ingProperties[d], c(b.ingProperties) &&
+                        this.disableTransition(), d in b.clean &&
+                        (this.element.style[a.propertyName] = "", delete
+                         b.clean[d]), d in b.onEnd) {
+                        var e = b.onEnd[d];
+                        e.call(this), delete b.onEnd[d]
+                    }
+                    this.emitEvent("transitionEnd", [this])
+                }
+            }, h.prototype.disableTransition = function() {
+                this.removeTransitionStyles(),
+              this.element.removeEventListener(m, this, !1),
+                this.isTransitioning = !1
+            }, h.prototype._removeStyles = function(a) {
+                var b = {};
+                for (var c in a) b[c] = "";
+                this.css(b)
+            };
+            var s = {
+                transitionProperty: "",
+                transitionDuration: ""
+            };
+            return h.prototype.removeTransitionStyles = function() {
+                this.css(s)
+            }, h.prototype.removeElem = function() {
+                this.element.parentNode.removeChild(this.element),
+              this.emitEvent("remove", [this])
+            }, h.prototype.remove = function() {
+                if (!i || !parseFloat(this.layout.options.transitionDuration))
+                  return void this.removeElem();
+                var a = this;
+                this.on("transitionEnd", function() {
+                    return a.removeElem(), !0
+                }), this.hide()
+            }, h.prototype.reveal = function() {
+                delete this.isHidden, this.css({
+                    display: ""
+                });
+                var a = this.layout.options;
+                this.transition({
+                    from: a.hiddenStyle,
+                    to: a.visibleStyle,
+                    isCleaning: !0
+                })
+            }, h.prototype.hide = function() {
+                this.isHidden = !0, this.css({
+                    display: ""
+                });
+                var a = this.layout.options;
+                this.transition({
+                    from: a.visibleStyle,
+                    to: a.hiddenStyle,
+                    isCleaning: !0,
+                    onTransitionEnd: {
+                        opacity: function() {
+                            this.isHidden && this.css({
+                                display: "none"
+                            })
+                        }
+                    }
+                })
+            }, h.prototype.destroy = function() {
+                this.css({
+                    position: "",
+                    left: "",
+                    right: "",
+                    top: "",
+                    bottom: "",
+                    transition: "",
+                    transform: ""
+                })
+            }, h
+        }
+        var f = a.getComputedStyle,
+            g = f ? function(a) {
+                return f(a, null)
+            } : function(a) {
+                return a.currentStyle
+            };
+        "function" == typeof define && define.amd ? define("outlayer/item",
+            ["eventEmitter/EventEmitter", "get-size/get-size",
+            "get-style-property/get-style-property"], e) : "object" == typeof
+          exports ? module.exports = e(require("wolfy87-eventemitter"),
+              require("get-size"), require("desandro-get-style-property")) :
+          (a.Outlayer = {}, a.Outlayer.Item = e(a.EventEmitter, a.getSize,
+                                                a.getStyleProperty))
+    }(window),
+    function(a) {
+        function b(a, b) {
+            for (var c in b) a[c] = b[c];
+            return a
+        }
+
+        function c(a) {
+            return "[object Array]" === l.call(a)
+        }
+
+        function d(a) {
+            var b = [];
+            if (c(a)) b = a;
+            else if (a && "number" == typeof a.length)
+                for (var d = 0, e = a.length; e > d; d++) b.push(a[d]);
+            else b.push(a);
+            return b
+        }
+
+        function e(a, b) {
+            var c = n(b, a); - 1 !== c && b.splice(c, 1)
+        }
+
+        function f(a) {
+            return a.replace(/(.)([A-Z])/g, function(a, b, c) {
+                return b + "-" + c
+            }).toLowerCase()
+        }
+
+        function g(c, g, l, n, o, p) {
+            function q(a, c) {
+                if ("string" == typeof a && (a = h.querySelector(a)), !a ||
+                    !m(a)) return void(i && i.error("Bad " +
+                      this.constructor.namespace + " element: " + a));
+                this.element = a, this.options = b({},
+                    this.constructor.defaults), this.option(c);
+                var d = ++r;
+                this.element.outlayerGUID = d, s[d] = this, this._create(),
+                this.options.isInitLayout && this.layout()
+            }
+            var r = 0,
+                s = {};
+            return q.namespace = "outlayer", q.Item = p, q.defaults = {
+                containerStyle: {
+                    position: "relative"
+                },
+                isInitLayout: !0,
+                isOriginLeft: !0,
+                isOriginTop: !0,
+                isResizeBound: !0,
+                isResizingContainer: !0,
+                transitionDuration: "0.4s",
+                hiddenStyle: {
+                    opacity: 0,
+                    transform: "scale(0.001)"
+                },
+                visibleStyle: {
+                    opacity: 1,
+                    transform: "scale(1)"
+                }
+            }, b(q.prototype, l.prototype), q.prototype.option = function(a) {
+                b(this.options, a)
+            }, q.prototype._create = function() {
+                this.reloadItems(), this.stamps = [],
+              this.stamp(this.options.stamp), b(this.element.style,
+                  this.options.containerStyle), this.options.isResizeBound &&
+                this.bindResize()
+            }, q.prototype.reloadItems = function() {
+                this.items = this._itemize(this.element.children)
+            }, q.prototype._itemize = function(a) {
+                for (var b = this._filterFindItemElements(a), c =
+                    this.constructor.Item, d = [], e = 0, f = b.length; f > e;
+                    e++) {
+                    var g = b[e],
+                        h = new c(g, this);
+                    d.push(h)
+                }
+                return d
+            }, q.prototype._filterFindItemElements = function(a) {
+                a = d(a);
+                for (var b = this.options.itemSelector, c = [], e = 0, f =
+                    a.length; f > e; e++) {
+                    var g = a[e];
+                    if (m(g))
+                        if (b) {
+                            o(g, b) && c.push(g);
+                            for (var h = g.querySelectorAll(b), i = 0, j =
+                                h.length; j > i; i++) c.push(h[i])
+                        } else c.push(g)
+                }
+                return c
+            }, q.prototype.getItemElements = function() {
+                for (var a = [], b = 0, c = this.items.length; c > b; b++)
+                  a.push(this.items[b].element);
+                return a
+            }, q.prototype.layout = function() {
+                this._resetLayout(), this._manageStamps();
+                var a = void 0 !== this.options.isLayoutInstant ?
+                  this.options.isLayoutInstant : !this._isLayoutInited;
+                this.layoutItems(this.items, a), this._isLayoutInited = !0
+            }, q.prototype._init = q.prototype.layout, q.prototype._resetLayout
+            = function() {
+                this.getSize()
+            }, q.prototype.getSize = function() {
+                this.size = n(this.element)
+            }, q.prototype._getMeasurement = function(a, b) {
+                var c, d = this.options[a];
+                d ? ("string" == typeof d ? c = this.element.querySelector(d) :
+                    m(d) && (c = d), this[a] = c ? n(c)[b] : d) : this[a] = 0
+            }, q.prototype.layoutItems = function(a, b) {
+                a = this._getItemsForLayout(a), this._layoutItems(a, b),
+              this._postLayout()
+            }, q.prototype._getItemsForLayout = function(a) {
+                for (var b = [], c = 0, d = a.length; d > c; c++) {
+                    var e = a[c];
+                    e.isIgnored || b.push(e)
+                }
+                return b
+            }, q.prototype._layoutItems = function(a, b) {
+                function c() {
+                    d.emitEvent("layoutComplete", [d, a])
+                }
+                var d = this;
+                if (!a || !a.length) return void c();
+                this._itemsOn(a, "layout", c);
+                for (var e = [], f = 0, g = a.length; g > f; f++) {
+                    var h = a[f],
+                        i = this._getItemLayoutPosition(h);
+                    i.item = h, i.isInstant = b || h.isLayoutInstant, e.push(i)
+                }
+                this._processLayoutQueue(e)
+            }, q.prototype._getItemLayoutPosition = function() {
+                return {
+                    x: 0,
+                    y: 0
+                }
+            }, q.prototype._processLayoutQueue = function(a) {
+                for (var b = 0, c = a.length; c > b; b++) {
+                    var d = a[b];
+                    this._positionItem(d.item, d.x, d.y, d.isInstant)
+                }
+            }, q.prototype._positionItem = function(a, b, c, d) {
+                d ? a.goTo(b, c) : a.moveTo(b, c)
+            }, q.prototype._postLayout = function() {
+                this.resizeContainer()
+            }, q.prototype.resizeContainer = function() {
+                if (this.options.isResizingContainer) {
+                    var a = this._getContainerSize();
+                    a && (this._setContainerMeasure(a.width, !0),
+                        this._setContainerMeasure(a.height, !1))
+                }
+            }, q.prototype._getContainerSize = k,
+            q.prototype._setContainerMeasure = function(a, b) {
+                if (void 0 !== a) {
+                    var c = this.size;
+                    c.isBorderBox && (a += b ? c.paddingLeft + c.paddingRight +
+                        c.borderLeftWidth + c.borderRightWidth : c.paddingBottom
+                        + c.paddingTop + c.borderTopWidth +
+                        c.borderBottomWidth), a = Math.max(a, 0),
+                    this.element.style[b ? "width" : "height"] = a + "px"
+                }
+            }, q.prototype._itemsOn = function(a, b, c) {
+                function d() {
+                    return e++, e === f && c.call(g), !0
+                }
+                for (var e = 0, f = a.length, g = this, h = 0, i = a.length; i >
+                    h; h++) {
+                    var j = a[h];
+                    j.on(b, d)
+                }
+            }, q.prototype.ignore = function(a) {
+                var b = this.getItem(a);
+                b && (b.isIgnored = !0)
+            }, q.prototype.unignore = function(a) {
+                var b = this.getItem(a);
+                b && delete b.isIgnored
+            }, q.prototype.stamp = function(a) {
+                if (a = this._find(a)) {
+                    this.stamps = this.stamps.concat(a);
+                    for (var b = 0, c = a.length; c > b; b++) {
+                        var d = a[b];
+                        this.ignore(d)
+                    }
+                }
+            }, q.prototype.unstamp = function(a) {
+                if (a = this._find(a))
+                    for (var b = 0, c = a.length; c > b; b++) {
+                        var d = a[b];
+                        e(d, this.stamps), this.unignore(d)
+                    }
+            }, q.prototype._find = function(a) {
+                return a ? ("string" == typeof a && (a =
+                      this.element.querySelectorAll(a)), a = d(a)) : void 0
+            }, q.prototype._manageStamps = function() {
+                if (this.stamps && this.stamps.length) {
+                    this._getBoundingRect();
+                    for (var a = 0, b = this.stamps.length; b > a; a++) {
+                        var c = this.stamps[a];
+                        this._manageStamp(c)
+                    }
+                }
+            }, q.prototype._getBoundingRect = function() {
+                var a = this.element.getBoundingClientRect(),
+                    b = this.size;
+                this._boundingRect = {
+                    left: a.left + b.paddingLeft + b.borderLeftWidth,
+                    top: a.top + b.paddingTop + b.borderTopWidth,
+                    right: a.right - (b.paddingRight + b.borderRightWidth),
+                    bottom: a.bottom - (b.paddingBottom + b.borderBottomWidth)
+                }
+            }, q.prototype._manageStamp = k, q.prototype._getElementOffset =
+                function(a) {
+                var b = a.getBoundingClientRect(),
+                    c = this._boundingRect,
+                    d = n(a),
+                    e = {
+                        left: b.left - c.left - d.marginLeft,
+                        top: b.top - c.top - d.marginTop,
+                        right: c.right - b.right - d.marginRight,
+                        bottom: c.bottom - b.bottom - d.marginBottom
+                    };
+                return e
+            }, q.prototype.handleEvent = function(a) {
+                var b = "on" + a.type;
+                this[b] && this[b](a)
+            }, q.prototype.bindResize = function() {
+                this.isResizeBound || (c.bind(a, "resize", this),
+                    this.isResizeBound = !0)
+            }, q.prototype.unbindResize = function() {
+                this.isResizeBound && c.unbind(a, "resize", this),
+              this.isResizeBound = !1
+            }, q.prototype.onresize = function() {
+                function a() {
+                    b.resize(), delete b.resizeTimeout
+                }
+                this.resizeTimeout && clearTimeout(this.resizeTimeout);
+                var b = this;
+                this.resizeTimeout = setTimeout(a, 100)
+            }, q.prototype.resize = function() {
+                this.isResizeBound && this.needsResizeLayout() && this.layout()
+            }, q.prototype.needsResizeLayout = function() {
+                var a = n(this.element),
+                    b = this.size && a;
+                return b && a.innerWidth !== this.size.innerWidth
+            }, q.prototype.addItems = function(a) {
+                var b = this._itemize(a);
+                return b.length && (this.items = this.items.concat(b)), b
+            }, q.prototype.appended = function(a) {
+                var b = this.addItems(a);
+                b.length && (this.layoutItems(b, !0), this.reveal(b))
+            }, q.prototype.prepended = function(a) {
+                var b = this._itemize(a);
+                if (b.length) {
+                    var c = this.items.slice(0);
+                    this.items = b.concat(c), this._resetLayout(),
+                    this._manageStamps(), this.layoutItems(b, !0),
+                      this.reveal(b), this.layoutItems(c)
+                }
+            }, q.prototype.reveal = function(a) {
+                var b = a && a.length;
+                if (b)
+                    for (var c = 0; b > c; c++) {
+                        var d = a[c];
+                        d.reveal()
+                    }
+            }, q.prototype.hide = function(a) {
+                var b = a && a.length;
+                if (b)
+                    for (var c = 0; b > c; c++) {
+                        var d = a[c];
+                        d.hide()
+                    }
+            }, q.prototype.getItem = function(a) {
+                for (var b = 0, c = this.items.length; c > b; b++) {
+                    var d = this.items[b];
+                    if (d.element === a) return d
+                }
+            }, q.prototype.getItems = function(a) {
+                if (a && a.length) {
+                    for (var b = [], c = 0, d = a.length; d > c; c++) {
+                        var e = a[c],
+                            f = this.getItem(e);
+                        f && b.push(f)
+                    }
+                    return b
+                }
+            }, q.prototype.remove = function(a) {
+                a = d(a);
+                var b = this.getItems(a);
+                if (b && b.length) {
+                    this._itemsOn(b, "remove", function() {
+                        this.emitEvent("removeComplete", [this, b])
+                    });
+                    for (var c = 0, f = b.length; f > c; c++) {
+                        var g = b[c];
+                        g.remove(), e(g, this.items)
+                    }
+                }
+            }, q.prototype.destroy = function() {
+                var a = this.element.style;
+                a.height = "", a.position = "", a.width = "";
+                for (var b = 0, c = this.items.length; c > b; b++) {
+                    var d = this.items[b];
+                    d.destroy()
+                }
+                this.unbindResize();
+                var e = this.element.outlayerGUID;
+                delete s[e], delete this.element.outlayerGUID, j &&
+                  j.removeData(this.element, this.constructor.namespace)
+            }, q.data = function(a) {
+                var b = a && a.outlayerGUID;
+                return b && s[b]
+            }, q.create = function(a, c) {
+                function d() {
+                    q.apply(this, arguments)
+                }
+                return Object.create ? d.prototype = Object.create(q.prototype)
+                  : b(d.prototype, q.prototype), d.prototype.constructor = d,
+                  d.defaults = b({}, q.defaults), b(d.defaults, c),
+                  d.prototype.settings = {}, d.namespace = a, d.data = q.data,
+                    d.Item = function() {
+                    p.apply(this, arguments)
+                }, d.Item.prototype = new p, g(function() {
+                    for (var b = f(a), c = h.querySelectorAll(".js-" + b), e =
+                        "data-" + b + "-options", g = 0, k = c.length; k > g;
+                        g++) {
+                        var l, m = c[g],
+                            n = m.getAttribute(e);
+                        try {
+                            l = n && JSON.parse(n)
+                        } catch (o) {
+                            i && i.error("Error parsing " + e + " on " +
+                                m.nodeName.toLowerCase() + (m.id ? "#" + m.id :
+                                  "") + ": " + o);
+                            continue
+                        }
+                        var p = new d(m, l);
+                        j && j.data(m, a, p)
+                    }
+                }), j && j.bridget && j.bridget(a, d), d
+            }, q.Item = p, q
+        }
+        var h = a.document,
+            i = a.console,
+            j = a.jQuery,
+            k = function() {},
+            l = Object.prototype.toString,
+            m = "function" == typeof HTMLElement || "object" == typeof
+              HTMLElement ? function(a) {
+                return a instanceof HTMLElement
+            } : function(a) {
+                return a && "object" == typeof a && 1 === a.nodeType && "string"
+                  == typeof a.nodeName
+            },
+            n = Array.prototype.indexOf ? function(a, b) {
+                return a.indexOf(b)
+            } : function(a, b) {
+                for (var c = 0, d = a.length; d > c; c++)
+                    if (a[c] === b) return c;
+                return -1
+            };
+        "function" == typeof define && define.amd ? define("outlayer/outlayer",
+            ["eventie/eventie", "doc-ready/doc-ready",
+            "eventEmitter/EventEmitter", "get-size/get-size",
+            "matches-selector/matches-selector", "./item"], g) : "object" ==
+          typeof exports ? module.exports = g(require("eventie"),
+              require("doc-ready"), require("wolfy87-eventemitter"),
+              require("get-size"), require("desandro-matches-selector"),
+              require("./item")) : a.Outlayer = g(a.eventie, a.docReady,
+              a.EventEmitter, a.getSize, a.matchesSelector, a.Outlayer.Item)
+    }(window),
+    function(a) {
+        function b(a, b) {
+            var d = a.create("masonry");
+            return d.prototype._resetLayout = function() {
+                this.getSize(), this._getMeasurement("columnWidth",
+                    "outerWidth"), this._getMeasurement("gutter", "outerWidth"),
+              this.measureColumns();
+                var a = this.cols;
+                for (this.colYs = []; a--;) this.colYs.push(0);
+                this.maxY = 0
+            }, d.prototype.measureColumns = function() {
+                if (this.getContainerWidth(), !this.columnWidth) {
+                    var a = this.items[0],
+                        c = a && a.element;
+                    this.columnWidth = c && b(c).outerWidth ||
+                      this.containerWidth
+                }
+                this.columnWidth += this.gutter, this.cols =
+                  Math.floor((this.containerWidth + this.gutter) /
+                      this.columnWidth), this.cols = Math.max(this.cols, 1)
+            }, d.prototype.getContainerWidth = function() {
+                var a = this.options.isFitWidth ? this.element.parentNode :
+                  this.element,
+                    c = b(a);
+                this.containerWidth = c && c.innerWidth
+            }, d.prototype._getItemLayoutPosition = function(a) {
+                a.getSize();
+                var b = a.size.outerWidth % this.columnWidth,
+                    d = b && 1 > b ? "round" : "ceil",
+                    e = Math[d](a.size.outerWidth / this.columnWidth);
+                e = Math.min(e, this.cols);
+                for (var f = this._getColGroup(e), g = Math.min.apply(Math, f),
+                    h = c(f, g), i = {
+                        x: this.columnWidth * h,
+                        y: g
+                    }, j = g + a.size.outerHeight, k = this.cols + 1 - f.length,
+                    l = 0; k > l; l++) this.colYs[h + l] = j;
+                return i
+            }, d.prototype._getColGroup = function(a) {
+                if (2 > a) return this.colYs;
+                for (var b = [], c = this.cols + 1 - a, d = 0; c > d; d++) {
+                    var e = this.colYs.slice(d, d + a);
+                    b[d] = Math.max.apply(Math, e)
+                }
+                return b
+            }, d.prototype._manageStamp = function(a) {
+                var c = b(a),
+                    d = this._getElementOffset(a),
+                    e = this.options.isOriginLeft ? d.left : d.right,
+                    f = e + c.outerWidth,
+                    g = Math.floor(e / this.columnWidth);
+                g = Math.max(0, g);
+                var h = Math.floor(f / this.columnWidth);
+                h -= f % this.columnWidth ? 0 : 1, h = Math.min(this.cols - 1,
+                    h);
+                for (var i = (this.options.isOriginTop ? d.top : d.bottom) +
+                    c.outerHeight, j = g; h >= j; j++) this.colYs[j] =
+                  Math.max(i, this.colYs[j])
+            }, d.prototype._getContainerSize = function() {
+                this.maxY = Math.max.apply(Math, this.colYs);
+                var a = {
+                    height: this.maxY
+                };
+                return this.options.isFitWidth && (a.width =
+                    this._getContainerFitWidth()), a
+            }, d.prototype._getContainerFitWidth = function() {
+                for (var a = 0, b = this.cols; --b && 0 === this.colYs[b];) a++;
+                return (this.cols - a) * this.columnWidth - this.gutter
+            }, d.prototype.needsResizeLayout = function() {
+                var a = this.containerWidth;
+                return this.getContainerWidth(), a !== this.containerWidth
+            }, d
+        }
+        var c = Array.prototype.indexOf ? function(a, b) {
+            return a.indexOf(b)
+        } : function(a, b) {
+            for (var c = 0, d = a.length; d > c; c++) {
+                var e = a[c];
+                if (e === b) return c
+            }
+            return -1
+        };
+        "function" == typeof define && define.amd ? define(["outlayer/outlayer",
+            "get-size/get-size"], b) : "object" == typeof exports ?
+          module.exports = b(require("outlayer"), require("get-size")) :
+          a.Masonry = b(a.Outlayer, a.getSize)
+    }(window);
+var container = document.querySelector('#container');
+var item = container.children[0];
+for (var i = 0; i < 100; ++i) {
+  container.appendChild(item.cloneNode(true));
+}
+document.body.style.display = 'block';
+window.done = false;
+window.brick = function() {
+  var mason = new Masonry(container, {
+    itemSelector: '.item',
+  });
+  requestAnimationFrame(function() {
+    mason.element.style.maxWidth = '950px';
+    mason.layout();
+    requestAnimationFrame(function() {
+      window.done = true;
+    });
+  });
+};
+</script>