[refactor] More post-NSS WebCrypto cleanups (utility functions).
[chromium-blink-merge.git] / tools / perf / page_sets / key_silk_cases / masonry.html
blobc4d8ecb6ea9d116e1b0b678264779a74688da8a7
1 <style>
2 body {
3 display: none;
4 margin: 0;
6 .item {
7 max-width: 200px;
8 border: 2px solid red;
9 margin: 1px;
11 </style>
12 <div id=container>
13 <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>
14 </div>
15 <script>
16 /*!
17 * Masonry PACKAGED v3.2.2
18 * Cascading grid layout library
19 * http://masonry.desandro.com
20 * MIT License
21 * by David DeSandro
23 ! function(a) {
24 function b() {}
26 function c(a) {
27 function c(b) {
28 b.prototype.option || (b.prototype.option = function(b) {
29 a.isPlainObject(b) && (this.options = a.extend(!0, this.options,
30 b))
34 function e(b, c) {
35 a.fn[b] = function(e) {
36 if ("string" == typeof e) {
37 for (var g = d.call(arguments, 1), h = 0, i = this.length; i
38 > h; h++) {
39 var j = this[h],
40 k = a.data(j, b);
41 if (k)
42 if (a.isFunction(k[e]) && "_" !== e.charAt(0)) {
43 var l = k[e].apply(k, g);
44 if (void 0 !== l) return l
45 } else f("no such method '" + e + "' for " + b +
46 " instance");
47 else f("cannot call methods on " + b +
48 " prior to initialization; attempted to call '" +
49 e + "'")
51 return this
53 return this.each(function() {
54 var d = a.data(this, b);
55 d ? (d.option(e), d._init()) : (d = new c(this, e),
56 a.data(this, b, d))
60 if (a) {
61 var f = "undefined" == typeof console ? b : function(a) {
62 console.error(a)
64 return a.bridget = function(a, b) {
65 c(b), e(a, b)
66 }, a.bridget
69 var d = Array.prototype.slice;
70 "function" == typeof define && define.amd ?
71 define("jquery-bridget/jquery.bridget", ["jquery"], c) : c("object" ==
72 typeof exports ? require("jquery") : a.jQuery)
73 }(window),
74 function(a) {
75 function b(b) {
76 var c = a.event;
77 return c.target = c.target || c.srcElement || b, c
79 var c = document.documentElement,
80 d = function() {};
81 c.addEventListener ? d = function(a, b, c) {
82 a.addEventListener(b, c, !1)
83 } : c.attachEvent && (d = function(a, c, d) {
84 a[c + d] = d.handleEvent ? function() {
85 var c = b(a);
86 d.handleEvent.call(d, c)
87 } : function() {
88 var c = b(a);
89 d.call(a, c)
90 }, a.attachEvent("on" + c, a[c + d])
91 });
92 var e = function() {};
93 c.removeEventListener ? e = function(a, b, c) {
94 a.removeEventListener(b, c, !1)
95 } : c.detachEvent && (e = function(a, b, c) {
96 a.detachEvent("on" + b, a[b + c]);
97 try {
98 delete a[b + c]
99 } catch (d) {
100 a[b + c] = void 0
103 var f = {
104 bind: d,
105 unbind: e
107 "function" == typeof define && define.amd ? define("eventie/eventie", f) :
108 "object" == typeof exports ? module.exports = f : a.eventie = f
109 }(this),
110 function(a) {
111 function b(a) {
112 "function" == typeof a && (b.isReady ? a() : g.push(a))
115 function c(a) {
116 var c = "readystatechange" === a.type && "complete" !== f.readyState;
117 b.isReady || c || d()
120 function d() {
121 b.isReady = !0;
122 for (var a = 0, c = g.length; c > a; a++) {
123 var d = g[a];
128 function e(e) {
129 return "complete" === f.readyState ? d() : (e.bind(f,
130 "DOMContentLoaded", c), e.bind(f, "readystatechange", c),
131 e.bind(a, "load", c)), b
133 var f = a.document,
134 g = [];
135 b.isReady = !1, "function" == typeof define && define.amd ?
136 define("doc-ready/doc-ready", ["eventie/eventie"], e) : "object" == typeof
137 exports ? module.exports = e(require("eventie")) : a.docReady =
138 e(a.eventie)
139 }(window),
140 function() {
141 function a() {}
143 function b(a, b) {
144 for (var c = a.length; c--;)
145 if (a[c].listener === b) return c;
146 return -1
149 function c(a) {
150 return function() {
151 return this[a].apply(this, arguments)
154 var d = a.prototype,
155 e = this,
156 f = e.EventEmitter;
157 d.getListeners = function(a) {
158 var b, c, d = this._getEvents();
159 if (a instanceof RegExp) {
160 b = {};
161 for (c in d) d.hasOwnProperty(c) && a.test(c) && (b[c] = d[c])
162 } else b = d[a] || (d[a] = []);
163 return b
164 }, d.flattenListeners = function(a) {
165 var b, c = [];
166 for (b = 0; b < a.length; b += 1) c.push(a[b].listener);
167 return c
168 }, d.getListenersAsObject = function(a) {
169 var b, c = this.getListeners(a);
170 return c instanceof Array && (b = {}, b[a] = c), b || c
171 }, d.addListener = function(a, c) {
172 var d, e = this.getListenersAsObject(a),
173 f = "object" == typeof c;
174 for (d in e) e.hasOwnProperty(d) && -1 === b(e[d], c) && e[d].push(f ? c
176 listener: c,
177 once: !1
179 return this
180 }, d.on = c("addListener"), d.addOnceListener = function(a, b) {
181 return this.addListener(a, {
182 listener: b,
183 once: !0
185 }, d.once = c("addOnceListener"), d.defineEvent = function(a) {
186 return this.getListeners(a), this
187 }, d.defineEvents = function(a) {
188 for (var b = 0; b < a.length; b += 1) this.defineEvent(a[b]);
189 return this
190 }, d.removeListener = function(a, c) {
191 var d, e, f = this.getListenersAsObject(a);
192 for (e in f) f.hasOwnProperty(e) && (d = b(f[e], c), -1 !== d &&
193 f[e].splice(d, 1));
194 return this
195 }, d.off = c("removeListener"), d.addListeners = function(a, b) {
196 return this.manipulateListeners(!1, a, b)
197 }, d.removeListeners = function(a, b) {
198 return this.manipulateListeners(!0, a, b)
199 }, d.manipulateListeners = function(a, b, c) {
200 var d, e, f = a ? this.removeListener : this.addListener,
201 g = a ? this.removeListeners : this.addListeners;
202 if ("object" != typeof b || b instanceof RegExp)
203 for (d = c.length; d--;) f.call(this, b, c[d]);
204 else
205 for (d in b) b.hasOwnProperty(d) && (e = b[d]) && ("function" ==
206 typeof e ? f.call(this, d, e) : g.call(this, d, e));
207 return this
208 }, d.removeEvent = function(a) {
209 var b, c = typeof a,
210 d = this._getEvents();
211 if ("string" === c) delete d[a];
212 else if (a instanceof RegExp)
213 for (b in d) d.hasOwnProperty(b) && a.test(b) && delete d[b];
214 else delete this._events;
215 return this
216 }, d.removeAllListeners = c("removeEvent"), d.emitEvent = function(a, b) {
217 var c, d, e, f, g = this.getListenersAsObject(a);
218 for (e in g)
219 if (g.hasOwnProperty(e))
220 for (d = g[e].length; d--;) c = g[e][d], c.once === !0 &&
221 this.removeListener(a, c.listener), f = c.listener.apply(this,
222 b || []), f === this._getOnceReturnValue() &&
223 this.removeListener(a, c.listener);
224 return this
225 }, d.trigger = c("emitEvent"), d.emit = function(a) {
226 var b = Array.prototype.slice.call(arguments, 1);
227 return this.emitEvent(a, b)
228 }, d.setOnceReturnValue = function(a) {
229 return this._onceReturnValue = a, this
230 }, d._getOnceReturnValue = function() {
231 return this.hasOwnProperty("_onceReturnValue") ? this._onceReturnValue :
233 }, d._getEvents = function() {
234 return this._events || (this._events = {})
235 }, a.noConflict = function() {
236 return e.EventEmitter = f, a
237 }, "function" == typeof define && define.amd ?
238 define("eventEmitter/EventEmitter", [], function() {
239 return a
240 }) : "object" == typeof module && module.exports ? module.exports = a :
241 e.EventEmitter = a
242 }.call(this),
243 function(a) {
244 function b(a) {
245 if (a) {
246 if ("string" == typeof d[a]) return a;
247 a = a.charAt(0).toUpperCase() + a.slice(1);
248 for (var b, e = 0, f = c.length; f > e; e++)
249 if (b = c[e] + a, "string" == typeof d[b]) return b
252 var c = "Webkit Moz ms Ms O".split(" "),
253 d = document.documentElement.style;
254 "function" == typeof define && define.amd ?
255 define("get-style-property/get-style-property", [], function() {
256 return b
257 }) : "object" == typeof exports ? module.exports = b :
258 a.getStyleProperty = b
259 }(window),
260 function(a) {
261 function b(a) {
262 var b = parseFloat(a),
263 c = -1 === a.indexOf("%") && !isNaN(b);
264 return c && b
267 function c() {}
269 function d() {
270 for (var a = {
271 width: 0,
272 height: 0,
273 innerWidth: 0,
274 innerHeight: 0,
275 outerWidth: 0,
276 outerHeight: 0
277 }, b = 0, c = g.length; c > b; b++) {
278 var d = g[b];
279 a[d] = 0
281 return a
284 function e(c) {
285 function e() {
286 if (!m) {
287 m = !0;
288 var d = a.getComputedStyle;
289 if (j = function() {
290 var a = d ? function(a) {
291 return d(a, null)
292 } : function(a) {
293 return a.currentStyle
295 return function(b) {
296 var c = a(b);
297 return c || f("Style returned " + c), c
299 }(), k = c("boxSizing")) {
300 var e = document.createElement("div");
301 e.style.width = "200px",
302 e.style.padding = "1px 2px 3px 4px",
303 e.style.borderStyle = "solid",
304 e.style.borderWidth = "1px 2px 3px 4px", e.style[k] =
305 "border-box";
306 var g = document.body || document.documentElement;
307 g.appendChild(e);
308 var h = j(e);
309 l = 200 === b(h.width), g.removeChild(e)
314 function h(a) {
315 if (e(), "string" == typeof a && (a =
316 document.querySelector(a)), a && "object" == typeof a &&
317 a.nodeType) {
318 var c = j(a);
319 if ("none" === c.display) return d();
320 var f = {};
321 f.width = a.offsetWidth, f.height = a.offsetHeight;
322 for (var h = f.isBorderBox = !(!k || !c[k] || "border-box"
323 !== c[k]), m = 0, n = g.length; n > m; m++) {
324 var o = g[m],
325 p = c[o];
326 p = i(a, p);
327 var q = parseFloat(p);
328 f[o] = isNaN(q) ? 0 : q
330 var r = f.paddingLeft + f.paddingRight,
331 s = f.paddingTop + f.paddingBottom,
332 t = f.marginLeft + f.marginRight,
333 u = f.marginTop + f.marginBottom,
334 v = f.borderLeftWidth + f.borderRightWidth,
335 w = f.borderTopWidth + f.borderBottomWidth,
336 x = h && l,
337 y = b(c.width);
338 y !== !1 && (f.width = y + (x ? 0 : r + v));
339 var z = b(c.height);
340 return z !== !1 && (f.height = z + (x ? 0 : s + w)),
341 f.innerWidth = f.width - (r + v), f.innerHeight = f.height -
342 (s + w), f.outerWidth = f.width + t, f.outerHeight =
343 f.height + u, f
347 function i(b, c) {
348 if (a.getComputedStyle || -1 === c.indexOf("%")) return c;
349 var d = b.style,
350 e = d.left,
351 f = b.runtimeStyle,
352 g = f && f.left;
353 return g && (f.left = b.currentStyle.left), d.left = c, c =
354 d.pixelLeft, d.left = e, g && (f.left = g), c
356 var j, k, l, m = !1;
357 return h
359 var f = "undefined" == typeof console ? c : function(a) {
360 console.error(a)
362 g = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom",
363 "marginLeft", "marginRight", "marginTop", "marginBottom",
364 "borderLeftWidth", "borderRightWidth", "borderTopWidth",
365 "borderBottomWidth"];
366 "function" == typeof define && define.amd ? define("get-size/get-size",
367 ["get-style-property/get-style-property"], e) : "object" == typeof
368 exports ? module.exports = e(require("desandro-get-style-property")) :
369 a.getSize = e(a.getStyleProperty)
370 }(window),
371 function(a) {
372 function b(a, b) {
373 return a[g](b)
376 function c(a) {
377 if (!a.parentNode) {
378 var b = document.createDocumentFragment();
379 b.appendChild(a)
383 function d(a, b) {
384 c(a);
385 for (var d = a.parentNode.querySelectorAll(b), e = 0, f = d.length;
386 f > e; e++)
387 if (d[e] === a) return !0;
388 return !1
391 function e(a, d) {
392 return c(a), b(a, d)
394 var f, g = function() {
395 if (a.matchesSelector) return "matchesSelector";
396 for (var b = ["webkit", "moz", "ms", "o"], c = 0, d = b.length; d >
397 c; c++) {
398 var e = b[c],
399 f = e + "MatchesSelector";
400 if (a[f]) return f
402 }();
403 if (g) {
404 var h = document.createElement("div"),
405 i = b(h, "div");
406 f = i ? b : e
407 } else f = d;
408 "function" == typeof define && define.amd ?
409 define("matches-selector/matches-selector", [], function() {
410 return f
411 }) : "object" == typeof exports ? module.exports = f :
412 window.matchesSelector = f
413 }(Element.prototype),
414 function(a) {
415 function b(a, b) {
416 for (var c in b) a[c] = b[c];
417 return a
420 function c(a) {
421 for (var b in a) return !1;
422 return b = null, !0
425 function d(a) {
426 return a.replace(/([A-Z])/g, function(a) {
427 return "-" + a.toLowerCase()
431 function e(a, e, f) {
432 function h(a, b) {
433 a && (this.element = a, this.layout = b, this.position = {
434 x: 0,
435 y: 0
436 }, this._create())
438 var i = f("transition"),
439 j = f("transform"),
440 k = i && j,
441 l = !!f("perspective"),
442 m = {
443 WebkitTransition: "webkitTransitionEnd",
444 MozTransition: "transitionend",
445 OTransition: "otransitionend",
446 transition: "transitionend"
447 }[i],
448 n = ["transform", "transition", "transitionDuration",
449 "transitionProperty"],
450 o = function() {
451 for (var a = {}, b = 0, c = n.length; c > b; b++) {
452 var d = n[b],
453 e = f(d);
454 e && e !== d && (a[d] = e)
456 return a
457 }();
458 b(h.prototype, a.prototype), h.prototype._create = function() {
459 this._transn = {
460 ingProperties: {},
461 clean: {},
462 onEnd: {}
463 }, this.css({
464 position: "absolute"
466 }, h.prototype.handleEvent = function(a) {
467 var b = "on" + a.type;
468 this[b] && this[b](a)
469 }, h.prototype.getSize = function() {
470 this.size = e(this.element)
471 }, h.prototype.css = function(a) {
472 var b = this.element.style;
473 for (var c in a) {
474 var d = o[c] || c;
475 b[d] = a[c]
477 }, h.prototype.getPosition = function() {
478 var a = g(this.element),
479 b = this.layout.options,
480 c = b.isOriginLeft,
481 d = b.isOriginTop,
482 e = parseInt(a[c ? "left" : "right"], 10),
483 f = parseInt(a[d ? "top" : "bottom"], 10);
484 e = isNaN(e) ? 0 : e, f = isNaN(f) ? 0 : f;
485 var h = this.layout.size;
486 e -= c ? h.paddingLeft : h.paddingRight, f -= d ? h.paddingTop :
487 h.paddingBottom, this.position.x = e, this.position.y = f
488 }, h.prototype.layoutPosition = function() {
489 var a = this.layout.size,
490 b = this.layout.options,
491 c = {};
492 b.isOriginLeft ? (c.left = this.position.x + a.paddingLeft +
493 "px", c.right = "") : (c.right = this.position.x +
494 a.paddingRight + "px", c.left = ""), b.isOriginTop ?
495 (c.top = this.position.y + a.paddingTop + "px", c.bottom =
496 "") : (c.bottom = this.position.y + a.paddingBottom + "px",
497 c.top = ""), this.css(c), this.emitEvent("layout",
498 [this])
500 var p = l ? function(a, b) {
501 return "translate3d(" + a + "px, " + b + "px, 0)"
502 } : function(a, b) {
503 return "translate(" + a + "px, " + b + "px)"
505 h.prototype._transitionTo = function(a, b) {
506 this.getPosition();
507 var c = this.position.x,
508 d = this.position.y,
509 e = parseInt(a, 10),
510 f = parseInt(b, 10),
511 g = e === this.position.x && f === this.position.y;
512 if (this.setPosition(a, b), g && !this.isTransitioning) return
513 void this.layoutPosition();
514 var h = a - c,
515 i = b - d,
516 j = {},
517 k = this.layout.options;
518 h = k.isOriginLeft ? h : -h, i = k.isOriginTop ? i : -i,
519 j.transform = p(h, i), this.transition({
520 to: j,
521 onTransitionEnd: {
522 transform: this.layoutPosition
524 isCleaning: !0
526 }, h.prototype.goTo = function(a, b) {
527 this.setPosition(a, b), this.layoutPosition()
528 }, h.prototype.moveTo = k ? h.prototype._transitionTo :
529 h.prototype.goTo, h.prototype.setPosition = function(a, b) {
530 this.position.x = parseInt(a, 10), this.position.y = parseInt(b,
532 }, h.prototype._nonTransition = function(a) {
533 this.css(a.to), a.isCleaning && this._removeStyles(a.to);
534 for (var b in a.onTransitionEnd) a.onTransitionEnd[b].call(this)
535 }, h.prototype._transition = function(a) {
536 if (!parseFloat(this.layout.options.transitionDuration)) return
537 void this._nonTransition(a);
538 var b = this._transn;
539 for (var c in a.onTransitionEnd) b.onEnd[c] =
540 a.onTransitionEnd[c];
541 for (c in a.to) b.ingProperties[c] = !0, a.isCleaning &&
542 (b.clean[c] = !0);
543 if (a.from) {
544 this.css(a.from);
545 var d = this.element.offsetHeight;
546 d = null
548 this.enableTransition(a.to), this.css(a.to),
549 this.isTransitioning = !0
551 var q = j && d(j) + ",opacity";
552 h.prototype.enableTransition = function() {
553 this.isTransitioning || (this.css({
554 transitionProperty: q,
555 transitionDuration: this.layout.options.transitionDuration
556 }), this.element.addEventListener(m, this, !1))
557 }, h.prototype.transition = h.prototype[i ? "_transition" :
558 "_nonTransition"], h.prototype.onwebkitTransitionEnd = function(a) {
559 this.ontransitionend(a)
560 }, h.prototype.onotransitionend = function(a) {
561 this.ontransitionend(a)
563 var r = {
564 "-webkit-transform": "transform",
565 "-moz-transform": "transform",
566 "-o-transform": "transform"
568 h.prototype.ontransitionend = function(a) {
569 if (a.target === this.element) {
570 var b = this._transn,
571 d = r[a.propertyName] || a.propertyName;
572 if (delete b.ingProperties[d], c(b.ingProperties) &&
573 this.disableTransition(), d in b.clean &&
574 (this.element.style[a.propertyName] = "", delete
575 b.clean[d]), d in b.onEnd) {
576 var e = b.onEnd[d];
577 e.call(this), delete b.onEnd[d]
579 this.emitEvent("transitionEnd", [this])
581 }, h.prototype.disableTransition = function() {
582 this.removeTransitionStyles(),
583 this.element.removeEventListener(m, this, !1),
584 this.isTransitioning = !1
585 }, h.prototype._removeStyles = function(a) {
586 var b = {};
587 for (var c in a) b[c] = "";
588 this.css(b)
590 var s = {
591 transitionProperty: "",
592 transitionDuration: ""
594 return h.prototype.removeTransitionStyles = function() {
595 this.css(s)
596 }, h.prototype.removeElem = function() {
597 this.element.parentNode.removeChild(this.element),
598 this.emitEvent("remove", [this])
599 }, h.prototype.remove = function() {
600 if (!i || !parseFloat(this.layout.options.transitionDuration))
601 return void this.removeElem();
602 var a = this;
603 this.on("transitionEnd", function() {
604 return a.removeElem(), !0
605 }), this.hide()
606 }, h.prototype.reveal = function() {
607 delete this.isHidden, this.css({
608 display: ""
610 var a = this.layout.options;
611 this.transition({
612 from: a.hiddenStyle,
613 to: a.visibleStyle,
614 isCleaning: !0
616 }, h.prototype.hide = function() {
617 this.isHidden = !0, this.css({
618 display: ""
620 var a = this.layout.options;
621 this.transition({
622 from: a.visibleStyle,
623 to: a.hiddenStyle,
624 isCleaning: !0,
625 onTransitionEnd: {
626 opacity: function() {
627 this.isHidden && this.css({
628 display: "none"
633 }, h.prototype.destroy = function() {
634 this.css({
635 position: "",
636 left: "",
637 right: "",
638 top: "",
639 bottom: "",
640 transition: "",
641 transform: ""
643 }, h
645 var f = a.getComputedStyle,
646 g = f ? function(a) {
647 return f(a, null)
648 } : function(a) {
649 return a.currentStyle
651 "function" == typeof define && define.amd ? define("outlayer/item",
652 ["eventEmitter/EventEmitter", "get-size/get-size",
653 "get-style-property/get-style-property"], e) : "object" == typeof
654 exports ? module.exports = e(require("wolfy87-eventemitter"),
655 require("get-size"), require("desandro-get-style-property")) :
656 (a.Outlayer = {}, a.Outlayer.Item = e(a.EventEmitter, a.getSize,
657 a.getStyleProperty))
658 }(window),
659 function(a) {
660 function b(a, b) {
661 for (var c in b) a[c] = b[c];
662 return a
665 function c(a) {
666 return "[object Array]" === l.call(a)
669 function d(a) {
670 var b = [];
671 if (c(a)) b = a;
672 else if (a && "number" == typeof a.length)
673 for (var d = 0, e = a.length; e > d; d++) b.push(a[d]);
674 else b.push(a);
675 return b
678 function e(a, b) {
679 var c = n(b, a); - 1 !== c && b.splice(c, 1)
682 function f(a) {
683 return a.replace(/(.)([A-Z])/g, function(a, b, c) {
684 return b + "-" + c
685 }).toLowerCase()
688 function g(c, g, l, n, o, p) {
689 function q(a, c) {
690 if ("string" == typeof a && (a = h.querySelector(a)), !a ||
691 !m(a)) return void(i && i.error("Bad " +
692 this.constructor.namespace + " element: " + a));
693 this.element = a, this.options = b({},
694 this.constructor.defaults), this.option(c);
695 var d = ++r;
696 this.element.outlayerGUID = d, s[d] = this, this._create(),
697 this.options.isInitLayout && this.layout()
699 var r = 0,
700 s = {};
701 return q.namespace = "outlayer", q.Item = p, q.defaults = {
702 containerStyle: {
703 position: "relative"
705 isInitLayout: !0,
706 isOriginLeft: !0,
707 isOriginTop: !0,
708 isResizeBound: !0,
709 isResizingContainer: !0,
710 transitionDuration: "0.4s",
711 hiddenStyle: {
712 opacity: 0,
713 transform: "scale(0.001)"
715 visibleStyle: {
716 opacity: 1,
717 transform: "scale(1)"
719 }, b(q.prototype, l.prototype), q.prototype.option = function(a) {
720 b(this.options, a)
721 }, q.prototype._create = function() {
722 this.reloadItems(), this.stamps = [],
723 this.stamp(this.options.stamp), b(this.element.style,
724 this.options.containerStyle), this.options.isResizeBound &&
725 this.bindResize()
726 }, q.prototype.reloadItems = function() {
727 this.items = this._itemize(this.element.children)
728 }, q.prototype._itemize = function(a) {
729 for (var b = this._filterFindItemElements(a), c =
730 this.constructor.Item, d = [], e = 0, f = b.length; f > e;
731 e++) {
732 var g = b[e],
733 h = new c(g, this);
734 d.push(h)
736 return d
737 }, q.prototype._filterFindItemElements = function(a) {
738 a = d(a);
739 for (var b = this.options.itemSelector, c = [], e = 0, f =
740 a.length; f > e; e++) {
741 var g = a[e];
742 if (m(g))
743 if (b) {
744 o(g, b) && c.push(g);
745 for (var h = g.querySelectorAll(b), i = 0, j =
746 h.length; j > i; i++) c.push(h[i])
747 } else c.push(g)
749 return c
750 }, q.prototype.getItemElements = function() {
751 for (var a = [], b = 0, c = this.items.length; c > b; b++)
752 a.push(this.items[b].element);
753 return a
754 }, q.prototype.layout = function() {
755 this._resetLayout(), this._manageStamps();
756 var a = void 0 !== this.options.isLayoutInstant ?
757 this.options.isLayoutInstant : !this._isLayoutInited;
758 this.layoutItems(this.items, a), this._isLayoutInited = !0
759 }, q.prototype._init = q.prototype.layout, q.prototype._resetLayout
760 = function() {
761 this.getSize()
762 }, q.prototype.getSize = function() {
763 this.size = n(this.element)
764 }, q.prototype._getMeasurement = function(a, b) {
765 var c, d = this.options[a];
766 d ? ("string" == typeof d ? c = this.element.querySelector(d) :
767 m(d) && (c = d), this[a] = c ? n(c)[b] : d) : this[a] = 0
768 }, q.prototype.layoutItems = function(a, b) {
769 a = this._getItemsForLayout(a), this._layoutItems(a, b),
770 this._postLayout()
771 }, q.prototype._getItemsForLayout = function(a) {
772 for (var b = [], c = 0, d = a.length; d > c; c++) {
773 var e = a[c];
774 e.isIgnored || b.push(e)
776 return b
777 }, q.prototype._layoutItems = function(a, b) {
778 function c() {
779 d.emitEvent("layoutComplete", [d, a])
781 var d = this;
782 if (!a || !a.length) return void c();
783 this._itemsOn(a, "layout", c);
784 for (var e = [], f = 0, g = a.length; g > f; f++) {
785 var h = a[f],
786 i = this._getItemLayoutPosition(h);
787 i.item = h, i.isInstant = b || h.isLayoutInstant, e.push(i)
789 this._processLayoutQueue(e)
790 }, q.prototype._getItemLayoutPosition = function() {
791 return {
792 x: 0,
793 y: 0
795 }, q.prototype._processLayoutQueue = function(a) {
796 for (var b = 0, c = a.length; c > b; b++) {
797 var d = a[b];
798 this._positionItem(d.item, d.x, d.y, d.isInstant)
800 }, q.prototype._positionItem = function(a, b, c, d) {
801 d ? a.goTo(b, c) : a.moveTo(b, c)
802 }, q.prototype._postLayout = function() {
803 this.resizeContainer()
804 }, q.prototype.resizeContainer = function() {
805 if (this.options.isResizingContainer) {
806 var a = this._getContainerSize();
807 a && (this._setContainerMeasure(a.width, !0),
808 this._setContainerMeasure(a.height, !1))
810 }, q.prototype._getContainerSize = k,
811 q.prototype._setContainerMeasure = function(a, b) {
812 if (void 0 !== a) {
813 var c = this.size;
814 c.isBorderBox && (a += b ? c.paddingLeft + c.paddingRight +
815 c.borderLeftWidth + c.borderRightWidth : c.paddingBottom
816 + c.paddingTop + c.borderTopWidth +
817 c.borderBottomWidth), a = Math.max(a, 0),
818 this.element.style[b ? "width" : "height"] = a + "px"
820 }, q.prototype._itemsOn = function(a, b, c) {
821 function d() {
822 return e++, e === f && c.call(g), !0
824 for (var e = 0, f = a.length, g = this, h = 0, i = a.length; i >
825 h; h++) {
826 var j = a[h];
827 j.on(b, d)
829 }, q.prototype.ignore = function(a) {
830 var b = this.getItem(a);
831 b && (b.isIgnored = !0)
832 }, q.prototype.unignore = function(a) {
833 var b = this.getItem(a);
834 b && delete b.isIgnored
835 }, q.prototype.stamp = function(a) {
836 if (a = this._find(a)) {
837 this.stamps = this.stamps.concat(a);
838 for (var b = 0, c = a.length; c > b; b++) {
839 var d = a[b];
840 this.ignore(d)
843 }, q.prototype.unstamp = function(a) {
844 if (a = this._find(a))
845 for (var b = 0, c = a.length; c > b; b++) {
846 var d = a[b];
847 e(d, this.stamps), this.unignore(d)
849 }, q.prototype._find = function(a) {
850 return a ? ("string" == typeof a && (a =
851 this.element.querySelectorAll(a)), a = d(a)) : void 0
852 }, q.prototype._manageStamps = function() {
853 if (this.stamps && this.stamps.length) {
854 this._getBoundingRect();
855 for (var a = 0, b = this.stamps.length; b > a; a++) {
856 var c = this.stamps[a];
857 this._manageStamp(c)
860 }, q.prototype._getBoundingRect = function() {
861 var a = this.element.getBoundingClientRect(),
862 b = this.size;
863 this._boundingRect = {
864 left: a.left + b.paddingLeft + b.borderLeftWidth,
865 top: a.top + b.paddingTop + b.borderTopWidth,
866 right: a.right - (b.paddingRight + b.borderRightWidth),
867 bottom: a.bottom - (b.paddingBottom + b.borderBottomWidth)
869 }, q.prototype._manageStamp = k, q.prototype._getElementOffset =
870 function(a) {
871 var b = a.getBoundingClientRect(),
872 c = this._boundingRect,
873 d = n(a),
874 e = {
875 left: b.left - c.left - d.marginLeft,
876 top: b.top - c.top - d.marginTop,
877 right: c.right - b.right - d.marginRight,
878 bottom: c.bottom - b.bottom - d.marginBottom
880 return e
881 }, q.prototype.handleEvent = function(a) {
882 var b = "on" + a.type;
883 this[b] && this[b](a)
884 }, q.prototype.bindResize = function() {
885 this.isResizeBound || (c.bind(a, "resize", this),
886 this.isResizeBound = !0)
887 }, q.prototype.unbindResize = function() {
888 this.isResizeBound && c.unbind(a, "resize", this),
889 this.isResizeBound = !1
890 }, q.prototype.onresize = function() {
891 function a() {
892 b.resize(), delete b.resizeTimeout
894 this.resizeTimeout && clearTimeout(this.resizeTimeout);
895 var b = this;
896 this.resizeTimeout = setTimeout(a, 100)
897 }, q.prototype.resize = function() {
898 this.isResizeBound && this.needsResizeLayout() && this.layout()
899 }, q.prototype.needsResizeLayout = function() {
900 var a = n(this.element),
901 b = this.size && a;
902 return b && a.innerWidth !== this.size.innerWidth
903 }, q.prototype.addItems = function(a) {
904 var b = this._itemize(a);
905 return b.length && (this.items = this.items.concat(b)), b
906 }, q.prototype.appended = function(a) {
907 var b = this.addItems(a);
908 b.length && (this.layoutItems(b, !0), this.reveal(b))
909 }, q.prototype.prepended = function(a) {
910 var b = this._itemize(a);
911 if (b.length) {
912 var c = this.items.slice(0);
913 this.items = b.concat(c), this._resetLayout(),
914 this._manageStamps(), this.layoutItems(b, !0),
915 this.reveal(b), this.layoutItems(c)
917 }, q.prototype.reveal = function(a) {
918 var b = a && a.length;
919 if (b)
920 for (var c = 0; b > c; c++) {
921 var d = a[c];
922 d.reveal()
924 }, q.prototype.hide = function(a) {
925 var b = a && a.length;
926 if (b)
927 for (var c = 0; b > c; c++) {
928 var d = a[c];
929 d.hide()
931 }, q.prototype.getItem = function(a) {
932 for (var b = 0, c = this.items.length; c > b; b++) {
933 var d = this.items[b];
934 if (d.element === a) return d
936 }, q.prototype.getItems = function(a) {
937 if (a && a.length) {
938 for (var b = [], c = 0, d = a.length; d > c; c++) {
939 var e = a[c],
940 f = this.getItem(e);
941 f && b.push(f)
943 return b
945 }, q.prototype.remove = function(a) {
946 a = d(a);
947 var b = this.getItems(a);
948 if (b && b.length) {
949 this._itemsOn(b, "remove", function() {
950 this.emitEvent("removeComplete", [this, b])
952 for (var c = 0, f = b.length; f > c; c++) {
953 var g = b[c];
954 g.remove(), e(g, this.items)
957 }, q.prototype.destroy = function() {
958 var a = this.element.style;
959 a.height = "", a.position = "", a.width = "";
960 for (var b = 0, c = this.items.length; c > b; b++) {
961 var d = this.items[b];
962 d.destroy()
964 this.unbindResize();
965 var e = this.element.outlayerGUID;
966 delete s[e], delete this.element.outlayerGUID, j &&
967 j.removeData(this.element, this.constructor.namespace)
968 }, q.data = function(a) {
969 var b = a && a.outlayerGUID;
970 return b && s[b]
971 }, q.create = function(a, c) {
972 function d() {
973 q.apply(this, arguments)
975 return Object.create ? d.prototype = Object.create(q.prototype)
976 : b(d.prototype, q.prototype), d.prototype.constructor = d,
977 d.defaults = b({}, q.defaults), b(d.defaults, c),
978 d.prototype.settings = {}, d.namespace = a, d.data = q.data,
979 d.Item = function() {
980 p.apply(this, arguments)
981 }, d.Item.prototype = new p, g(function() {
982 for (var b = f(a), c = h.querySelectorAll(".js-" + b), e =
983 "data-" + b + "-options", g = 0, k = c.length; k > g;
984 g++) {
985 var l, m = c[g],
986 n = m.getAttribute(e);
987 try {
988 l = n && JSON.parse(n)
989 } catch (o) {
990 i && i.error("Error parsing " + e + " on " +
991 m.nodeName.toLowerCase() + (m.id ? "#" + m.id :
992 "") + ": " + o);
993 continue
995 var p = new d(m, l);
996 j && j.data(m, a, p)
998 }), j && j.bridget && j.bridget(a, d), d
999 }, q.Item = p, q
1001 var h = a.document,
1002 i = a.console,
1003 j = a.jQuery,
1004 k = function() {},
1005 l = Object.prototype.toString,
1006 m = "function" == typeof HTMLElement || "object" == typeof
1007 HTMLElement ? function(a) {
1008 return a instanceof HTMLElement
1009 } : function(a) {
1010 return a && "object" == typeof a && 1 === a.nodeType && "string"
1011 == typeof a.nodeName
1013 n = Array.prototype.indexOf ? function(a, b) {
1014 return a.indexOf(b)
1015 } : function(a, b) {
1016 for (var c = 0, d = a.length; d > c; c++)
1017 if (a[c] === b) return c;
1018 return -1
1020 "function" == typeof define && define.amd ? define("outlayer/outlayer",
1021 ["eventie/eventie", "doc-ready/doc-ready",
1022 "eventEmitter/EventEmitter", "get-size/get-size",
1023 "matches-selector/matches-selector", "./item"], g) : "object" ==
1024 typeof exports ? module.exports = g(require("eventie"),
1025 require("doc-ready"), require("wolfy87-eventemitter"),
1026 require("get-size"), require("desandro-matches-selector"),
1027 require("./item")) : a.Outlayer = g(a.eventie, a.docReady,
1028 a.EventEmitter, a.getSize, a.matchesSelector, a.Outlayer.Item)
1029 }(window),
1030 function(a) {
1031 function b(a, b) {
1032 var d = a.create("masonry");
1033 return d.prototype._resetLayout = function() {
1034 this.getSize(), this._getMeasurement("columnWidth",
1035 "outerWidth"), this._getMeasurement("gutter", "outerWidth"),
1036 this.measureColumns();
1037 var a = this.cols;
1038 for (this.colYs = []; a--;) this.colYs.push(0);
1039 this.maxY = 0
1040 }, d.prototype.measureColumns = function() {
1041 if (this.getContainerWidth(), !this.columnWidth) {
1042 var a = this.items[0],
1043 c = a && a.element;
1044 this.columnWidth = c && b(c).outerWidth ||
1045 this.containerWidth
1047 this.columnWidth += this.gutter, this.cols =
1048 Math.floor((this.containerWidth + this.gutter) /
1049 this.columnWidth), this.cols = Math.max(this.cols, 1)
1050 }, d.prototype.getContainerWidth = function() {
1051 var a = this.options.isFitWidth ? this.element.parentNode :
1052 this.element,
1053 c = b(a);
1054 this.containerWidth = c && c.innerWidth
1055 }, d.prototype._getItemLayoutPosition = function(a) {
1056 a.getSize();
1057 var b = a.size.outerWidth % this.columnWidth,
1058 d = b && 1 > b ? "round" : "ceil",
1059 e = Math[d](a.size.outerWidth / this.columnWidth);
1060 e = Math.min(e, this.cols);
1061 for (var f = this._getColGroup(e), g = Math.min.apply(Math, f),
1062 h = c(f, g), i = {
1063 x: this.columnWidth * h,
1064 y: g
1065 }, j = g + a.size.outerHeight, k = this.cols + 1 - f.length,
1066 l = 0; k > l; l++) this.colYs[h + l] = j;
1067 return i
1068 }, d.prototype._getColGroup = function(a) {
1069 if (2 > a) return this.colYs;
1070 for (var b = [], c = this.cols + 1 - a, d = 0; c > d; d++) {
1071 var e = this.colYs.slice(d, d + a);
1072 b[d] = Math.max.apply(Math, e)
1074 return b
1075 }, d.prototype._manageStamp = function(a) {
1076 var c = b(a),
1077 d = this._getElementOffset(a),
1078 e = this.options.isOriginLeft ? d.left : d.right,
1079 f = e + c.outerWidth,
1080 g = Math.floor(e / this.columnWidth);
1081 g = Math.max(0, g);
1082 var h = Math.floor(f / this.columnWidth);
1083 h -= f % this.columnWidth ? 0 : 1, h = Math.min(this.cols - 1,
1085 for (var i = (this.options.isOriginTop ? d.top : d.bottom) +
1086 c.outerHeight, j = g; h >= j; j++) this.colYs[j] =
1087 Math.max(i, this.colYs[j])
1088 }, d.prototype._getContainerSize = function() {
1089 this.maxY = Math.max.apply(Math, this.colYs);
1090 var a = {
1091 height: this.maxY
1093 return this.options.isFitWidth && (a.width =
1094 this._getContainerFitWidth()), a
1095 }, d.prototype._getContainerFitWidth = function() {
1096 for (var a = 0, b = this.cols; --b && 0 === this.colYs[b];) a++;
1097 return (this.cols - a) * this.columnWidth - this.gutter
1098 }, d.prototype.needsResizeLayout = function() {
1099 var a = this.containerWidth;
1100 return this.getContainerWidth(), a !== this.containerWidth
1101 }, d
1103 var c = Array.prototype.indexOf ? function(a, b) {
1104 return a.indexOf(b)
1105 } : function(a, b) {
1106 for (var c = 0, d = a.length; d > c; c++) {
1107 var e = a[c];
1108 if (e === b) return c
1110 return -1
1112 "function" == typeof define && define.amd ? define(["outlayer/outlayer",
1113 "get-size/get-size"], b) : "object" == typeof exports ?
1114 module.exports = b(require("outlayer"), require("get-size")) :
1115 a.Masonry = b(a.Outlayer, a.getSize)
1116 }(window);
1117 var container = document.querySelector('#container');
1118 var item = container.children[0];
1119 for (var i = 0; i < 20; ++i) {
1120 container.appendChild(item.cloneNode(true));
1122 document.body.style.display = 'block';
1123 window.done = false;
1124 window.brick = function() {
1125 var mason = new Masonry(container, {
1126 itemSelector: '.item',
1128 function relayout(i) {
1129 if (i === 30) {
1130 window.done = true;
1131 return;
1133 requestAnimationFrame(function() {
1134 mason.element.style.maxWidth = '950px';
1135 mason.layout();
1136 requestAnimationFrame(function() {
1137 mason.element.style.maxWidth = '200px';
1138 mason.layout();
1139 requestAnimationFrame(function() {
1140 relayout(i + 1);
1145 relayout(0);
1147 </script>