desandro's packery

desandro-s-packery.markdown

desandro's packery

A Pen by soren on CodePen.

License.

index.html

<div class="wrapper">

  <div class="grid">
    <!-- gutter -->
    <div class="grid-item"  data-aos="fade-up">
      <div>1</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>2</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>3</div>
    </div>
    <div class="grid-item grid-item--height2" data-aos="fade-up">
      <div>4</div>
    </div> 
    <div class="grid-item grid-item--width2" data-aos="fade-up">
      <div>5</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>6</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>7</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>8</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>9</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>10</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>11</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>12</div>
    </div>
    <div class="grid-item grid-item--width2" data-aos="fade-up">
      <div>13</div>
    </div>
    <div class="grid-item grid-item--height2" data-aos="fade-up">
      <div>14</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>15</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>16</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>17</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>18</div>
    </div>
    <div class="grid-item grid-item--width2" data-aos="fade-up">
      <div>19</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>20</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>21</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>22</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>23</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>24</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>25</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>26</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>27</div>
    </div>

    <!-- extra elements for demo only -->

    <div class="grid-item" data-aos="fade-up">
      <div>28</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>29</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>30</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>31</div>
    </div>

    <div class="grid-item" data-aos="fade-up">
      <div>32</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>33</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>34</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>35</div>
    </div>

    <div class="grid-item" data-aos="fade-up">
      <div>36</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>37</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>38</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>39</div>
    </div>

    <div class="grid-item" data-aos="fade-up">
      <div>40</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>41</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>42</div>
    </div>
    <div class="grid-item" data-aos="fade-up">
      <div>43</div>
    </div>

    <div class="grid-sizer" data-aos="fade-up"></div>
  </div>

</div>

script.js

/*!
 * Packery PACKAGED v2.1.1
 * Gapless, draggable grid layouts
 *
 * Licensed GPLv3 for open source use
 * or Packery Commercial License for commercial use
 *
 * http://packery.metafizzy.co
 * Copyright 2016 Metafizzy
 */

! function(t, e) {
  "use strict";
  "function" == typeof define && define.amd ? define("jquery-bridget/jquery-bridget", ["jquery"], function(i) {
    e(t, i)
  }) : "object" == typeof module && module.exports ? module.exports = e(t, require("jquery")) : t.jQueryBridget = e(t, t.jQuery)
}(window, function(t, e) {
  "use strict";

  function i(i, s, a) {
    function h(t, e, n) {
      var o, s = "$()." + i + '("' + e + '")';
      return t.each(function(t, h) {
        var u = a.data(h, i);
        if (!u) return void r(i + " not initialized. Cannot call methods, i.e. " + s);
        var c = u[e];
        if (!c || "_" == e.charAt(0)) return void r(s + " is not a valid method");
        var d = c.apply(u, n);
        o = void 0 === o ? d : o
      }), void 0 !== o ? o : t
    }

    function u(t, e) {
      t.each(function(t, n) {
        var o = a.data(n, i);
        o ? (o.option(e), o._init()) : (o = new s(n, e), a.data(n, i, o))
      })
    }
    a = a || e || t.jQuery, a && (s.prototype.option || (s.prototype.option = function(t) {
      a.isPlainObject(t) && (this.options = a.extend(!0, this.options, t))
    }), a.fn[i] = function(t) {
      if ("string" == typeof t) {
        var e = o.call(arguments, 1);
        return h(this, t, e)
      }
      return u(this, t), this
    }, n(a))
  }

  function n(t) {
    !t || t && t.bridget || (t.bridget = i)
  }
  var o = Array.prototype.slice,
    s = t.console,
    r = "undefined" == typeof s ? function() {} : function(t) {
      s.error(t)
    };
  return n(e || t.jQuery), i
}),
function(t, e) {
  "use strict";
  "function" == typeof define && define.amd ? define("get-size/get-size", [], function() {
    return e()
  }) : "object" == typeof module && module.exports ? module.exports = e() : t.getSize = e()
}(window, function() {
  "use strict";

  function t(t) {
    var e = parseFloat(t),
      i = -1 == t.indexOf("%") && !isNaN(e);
    return i && e
  }

  function e() {}

  function i() {
    for (var t = {
        width: 0,
        height: 0,
        innerWidth: 0,
        innerHeight: 0,
        outerWidth: 0,
        outerHeight: 0
      }, e = 0; u > e; e++) {
      var i = h[e];
      t[i] = 0
    }
    return t
  }

  function n(t) {
    var e = getComputedStyle(t);
    return e || a("Style returned " + e + ". Are you running this code in a hidden iframe on Firefox? See http://bit.ly/getsizebug1"), e
  }

  function o() {
    if (!c) {
      c = !0;
      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.boxSizing = "border-box";
      var i = document.body || document.documentElement;
      i.appendChild(e);
      var o = n(e);
      s.isBoxSizeOuter = r = 200 == t(o.width), i.removeChild(e)
    }
  }

  function s(e) {
    if (o(), "string" == typeof e && (e = document.querySelector(e)), e && "object" == typeof e && e.nodeType) {
      var s = n(e);
      if ("none" == s.display) return i();
      var a = {};
      a.width = e.offsetWidth, a.height = e.offsetHeight;
      for (var c = a.isBorderBox = "border-box" == s.boxSizing, d = 0; u > d; d++) {
        var f = h[d],
          l = s[f],
          p = parseFloat(l);
        a[f] = isNaN(p) ? 0 : p
      }
      var g = a.paddingLeft + a.paddingRight,
        m = a.paddingTop + a.paddingBottom,
        y = a.marginLeft + a.marginRight,
        v = a.marginTop + a.marginBottom,
        _ = a.borderLeftWidth + a.borderRightWidth,
        x = a.borderTopWidth + a.borderBottomWidth,
        b = c && r,
        E = t(s.width);
      E !== !1 && (a.width = E + (b ? 0 : g + _));
      var T = t(s.height);
      return T !== !1 && (a.height = T + (b ? 0 : m + x)), a.innerWidth = a.width - (g + _), a.innerHeight = a.height - (m + x), a.outerWidth = a.width + y, a.outerHeight = a.height + v, a
    }
  }
  var r, a = "undefined" == typeof console ? e : function(t) {
      console.error(t)
    },
    h = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "marginLeft", "marginRight", "marginTop", "marginBottom", "borderLeftWidth", "borderRightWidth", "borderTopWidth", "borderBottomWidth"],
    u = h.length,
    c = !1;
  return s
}),
function(t, e) {
  "function" == typeof define && define.amd ? define("ev-emitter/ev-emitter", e) : "object" == typeof module && module.exports ? module.exports = e() : t.EvEmitter = e()
}(this, function() {
  function t() {}
  var e = t.prototype;
  return e.on = function(t, e) {
    if (t && e) {
      var i = this._events = this._events || {},
        n = i[t] = i[t] || [];
      return -1 == n.indexOf(e) && n.push(e), this
    }
  }, e.once = function(t, e) {
    if (t && e) {
      this.on(t, e);
      var i = this._onceEvents = this._onceEvents || {},
        n = i[t] = i[t] || {};
      return n[e] = !0, this
    }
  }, e.off = function(t, e) {
    var i = this._events && this._events[t];
    if (i && i.length) {
      var n = i.indexOf(e);
      return -1 != n && i.splice(n, 1), this
    }
  }, e.emitEvent = function(t, e) {
    var i = this._events && this._events[t];
    if (i && i.length) {
      var n = 0,
        o = i[n];
      e = e || [];
      for (var s = this._onceEvents && this._onceEvents[t]; o;) {
        var r = s && s[o];
        r && (this.off(t, o), delete s[o]), o.apply(this, e), n += r ? 0 : 1, o = i[n]
      }
      return this
    }
  }, t
}),
function(t, e) {
  "use strict";
  "function" == typeof define && define.amd ? define("desandro-matches-selector/matches-selector", e) : "object" == typeof module && module.exports ? module.exports = e() : t.matchesSelector = e()
}(window, function() {
  "use strict";
  var t = function() {
    var t = Element.prototype;
    if (t.matches) return "matches";
    if (t.matchesSelector) return "matchesSelector";
    for (var e = ["webkit", "moz", "ms", "o"], i = 0; i < e.length; i++) {
      var n = e[i],
        o = n + "MatchesSelector";
      if (t[o]) return o
    }
  }();
  return function(e, i) {
    return e[t](i)
  }
}),
function(t, e) {
  "function" == typeof define && define.amd ? define("fizzy-ui-utils/utils", ["desandro-matches-selector/matches-selector"], function(i) {
    return e(t, i)
  }) : "object" == typeof module && module.exports ? module.exports = e(t, require("desandro-matches-selector")) : t.fizzyUIUtils = e(t, t.matchesSelector)
}(window, function(t, e) {
  var i = {};
  i.extend = function(t, e) {
    for (var i in e) t[i] = e[i];
    return t
  }, i.modulo = function(t, e) {
    return (t % e + e) % e
  }, i.makeArray = function(t) {
    var e = [];
    if (Array.isArray(t)) e = t;
    else if (t && "number" == typeof t.length)
      for (var i = 0; i < t.length; i++) e.push(t[i]);
    else e.push(t);
    return e
  }, i.removeFrom = function(t, e) {
    var i = t.indexOf(e); - 1 != i && t.splice(i, 1)
  }, i.getParent = function(t, i) {
    for (; t != document.body;)
      if (t = t.parentNode, e(t, i)) return t
  }, i.getQueryElement = function(t) {
    return "string" == typeof t ? document.querySelector(t) : t
  }, i.handleEvent = function(t) {
    var e = "on" + t.type;
    this[e] && this[e](t)
  }, i.filterFindElements = function(t, n) {
    t = i.makeArray(t);
    var o = [];
    return t.forEach(function(t) {
      if (t instanceof HTMLElement) {
        if (!n) return void o.push(t);
        e(t, n) && o.push(t);
        for (var i = t.querySelectorAll(n), s = 0; s < i.length; s++) o.push(i[s])
      }
    }), o
  }, i.debounceMethod = function(t, e, i) {
    var n = t.prototype[e],
      o = e + "Timeout";
    t.prototype[e] = function() {
      var t = this[o];
      t && clearTimeout(t);
      var e = arguments,
        s = this;
      this[o] = setTimeout(function() {
        n.apply(s, e), delete s[o]
      }, i || 100)
    }
  }, i.docReady = function(t) {
    "complete" == document.readyState ? t() : document.addEventListener("DOMContentLoaded", t)
  }, i.toDashed = function(t) {
    return t.replace(/(.)([A-Z])/g, function(t, e, i) {
      return e + "-" + i
    }).toLowerCase()
  };
  var n = t.console;
  return i.htmlInit = function(e, o) {
    i.docReady(function() {
      var s = i.toDashed(o),
        r = "data-" + s,
        a = document.querySelectorAll("[" + r + "]"),
        h = document.querySelectorAll(".js-" + s),
        u = i.makeArray(a).concat(i.makeArray(h)),
        c = r + "-options",
        d = t.jQuery;
      u.forEach(function(t) {
        var i, s = t.getAttribute(r) || t.getAttribute(c);
        try {
          i = s && JSON.parse(s)
        } catch (a) {
          return void(n && n.error("Error parsing " + r + " on " + t.className + ": " + a))
        }
        var h = new e(t, i);
        d && d.data(t, o, h)
      })
    })
  }, i
}),
function(t, e) {
  "function" == typeof define && define.amd ? define("outlayer/item", ["ev-emitter/ev-emitter", "get-size/get-size"], e) : "object" == typeof module && module.exports ? module.exports = e(require("ev-emitter"), require("get-size")) : (t.Outlayer = {}, t.Outlayer.Item = e(t.EvEmitter, t.getSize))
}(window, function(t, e) {
  "use strict";

  function i(t) {
    for (var e in t) return !1;
    return e = null, !0
  }

  function n(t, e) {
    t && (this.element = t, this.layout = e, this.position = {
      x: 0,
      y: 0
    }, this._create())
  }

  function o(t) {
    return t.replace(/([A-Z])/g, function(t) {
      return "-" + t.toLowerCase()
    })
  }
  var s = document.documentElement.style,
    r = "string" == typeof s.transition ? "transition" : "WebkitTransition",
    a = "string" == typeof s.transform ? "transform" : "WebkitTransform",
    h = {
      WebkitTransition: "webkitTransitionEnd",
      transition: "transitionend"
    }[r],
    u = {
      transform: a,
      transition: r,
      transitionDuration: r + "Duration",
      transitionProperty: r + "Property",
      transitionDelay: r + "Delay"
    },
    c = n.prototype = Object.create(t.prototype);
  c.constructor = n, c._create = function() {
    this._transn = {
      ingProperties: {},
      clean: {},
      onEnd: {}
    }, this.css({
      position: "absolute"
    })
  }, c.handleEvent = function(t) {
    var e = "on" + t.type;
    this[e] && this[e](t)
  }, c.getSize = function() {
    this.size = e(this.element)
  }, c.css = function(t) {
    var e = this.element.style;
    for (var i in t) {
      var n = u[i] || i;
      e[n] = t[i]
    }
  }, c.getPosition = function() {
    var t = getComputedStyle(this.element),
      e = this.layout._getOption("originLeft"),
      i = this.layout._getOption("originTop"),
      n = t[e ? "left" : "right"],
      o = t[i ? "top" : "bottom"],
      s = this.layout.size,
      r = -1 != n.indexOf("%") ? parseFloat(n) / 100 * s.width : parseInt(n, 10),
      a = -1 != o.indexOf("%") ? parseFloat(o) / 100 * s.height : parseInt(o, 10);
    r = isNaN(r) ? 0 : r, a = isNaN(a) ? 0 : a, r -= e ? s.paddingLeft : s.paddingRight, a -= i ? s.paddingTop : s.paddingBottom, this.position.x = r, this.position.y = a
  }, c.layoutPosition = function() {
    var t = this.layout.size,
      e = {},
      i = this.layout._getOption("originLeft"),
      n = this.layout._getOption("originTop"),
      o = i ? "paddingLeft" : "paddingRight",
      s = i ? "left" : "right",
      r = i ? "right" : "left",
      a = this.position.x + t[o];
    e[s] = this.getXValue(a), e[r] = "";
    var h = n ? "paddingTop" : "paddingBottom",
      u = n ? "top" : "bottom",
      c = n ? "bottom" : "top",
      d = this.position.y + t[h];
    e[u] = this.getYValue(d), e[c] = "", this.css(e), this.emitEvent("layout", [this])
  }, c.getXValue = function(t) {
    var e = this.layout._getOption("horizontal");
    return this.layout.options.percentPosition && !e ? t / this.layout.size.width * 100 + "%" : t + "px"
  }, c.getYValue = function(t) {
    var e = this.layout._getOption("horizontal");
    return this.layout.options.percentPosition && e ? t / this.layout.size.height * 100 + "%" : t + "px"
  }, c._transitionTo = function(t, e) {
    this.getPosition();
    var i = this.position.x,
      n = this.position.y,
      o = parseInt(t, 10),
      s = parseInt(e, 10),
      r = o === this.position.x && s === this.position.y;
    if (this.setPosition(t, e), r && !this.isTransitioning) return void this.layoutPosition();
    var a = t - i,
      h = e - n,
      u = {};
    u.transform = this.getTranslate(a, h), this.transition({
      to: u,
      onTransitionEnd: {
        transform: this.layoutPosition
      },
      isCleaning: !0
    })
  }, c.getTranslate = function(t, e) {
    var i = this.layout._getOption("originLeft"),
      n = this.layout._getOption("originTop");
    return t = i ? t : -t, e = n ? e : -e, "translate3d(" + t + "px, " + e + "px, 0)"
  }, c.goTo = function(t, e) {
    this.setPosition(t, e), this.layoutPosition()
  }, c.moveTo = c._transitionTo, c.setPosition = function(t, e) {
    this.position.x = parseInt(t, 10), this.position.y = parseInt(e, 10)
  }, c._nonTransition = function(t) {
    this.css(t.to), t.isCleaning && this._removeStyles(t.to);
    for (var e in t.onTransitionEnd) t.onTransitionEnd[e].call(this)
  }, c.transition = function(t) {
    if (!parseFloat(this.layout.options.transitionDuration)) return void this._nonTransition(t);
    var e = this._transn;
    for (var i in t.onTransitionEnd) e.onEnd[i] = t.onTransitionEnd[i];
    for (i in t.to) e.ingProperties[i] = !0, t.isCleaning && (e.clean[i] = !0);
    if (t.from) {
      this.css(t.from);
      var n = this.element.offsetHeight;
      n = null
    }
    this.enableTransition(t.to), this.css(t.to), this.isTransitioning = !0
  };
  var d = "opacity," + o(a);
  c.enableTransition = function() {
    if (!this.isTransitioning) {
      var t = this.layout.options.transitionDuration;
      t = "number" == typeof t ? t + "ms" : t, this.css({
        transitionProperty: d,
        transitionDuration: t,
        transitionDelay: this.staggerDelay || 0
      }), this.element.addEventListener(h, this, !1)
    }
  }, c.onwebkitTransitionEnd = function(t) {
    this.ontransitionend(t)
  }, c.onotransitionend = function(t) {
    this.ontransitionend(t)
  };
  var f = {
    "-webkit-transform": "transform"
  };
  c.ontransitionend = function(t) {
    if (t.target === this.element) {
      var e = this._transn,
        n = f[t.propertyName] || t.propertyName;
      if (delete e.ingProperties[n], i(e.ingProperties) && this.disableTransition(), n in e.clean && (this.element.style[t.propertyName] = "", delete e.clean[n]), n in e.onEnd) {
        var o = e.onEnd[n];
        o.call(this), delete e.onEnd[n]
      }
      this.emitEvent("transitionEnd", [this])
    }
  }, c.disableTransition = function() {
    this.removeTransitionStyles(), this.element.removeEventListener(h, this, !1), this.isTransitioning = !1
  }, c._removeStyles = function(t) {
    var e = {};
    for (var i in t) e[i] = "";
    this.css(e)
  };
  var l = {
    transitionProperty: "",
    transitionDuration: "",
    transitionDelay: ""
  };
  return c.removeTransitionStyles = function() {
    this.css(l)
  }, c.stagger = function(t) {
    t = isNaN(t) ? 0 : t, this.staggerDelay = t + "ms"
  }, c.removeElem = function() {
    this.element.parentNode.removeChild(this.element), this.css({
      display: ""
    }), this.emitEvent("remove", [this])
  }, c.remove = function() {
    return r && parseFloat(this.layout.options.transitionDuration) ? (this.once("transitionEnd", function() {
      this.removeElem()
    }), void this.hide()) : void this.removeElem()
  }, c.reveal = function() {
    delete this.isHidden, this.css({
      display: ""
    });
    var t = this.layout.options,
      e = {},
      i = this.getHideRevealTransitionEndProperty("visibleStyle");
    e[i] = this.onRevealTransitionEnd, this.transition({
      from: t.hiddenStyle,
      to: t.visibleStyle,
      isCleaning: !0,
      onTransitionEnd: e
    })
  }, c.onRevealTransitionEnd = function() {
    this.isHidden || this.emitEvent("reveal")
  }, c.getHideRevealTransitionEndProperty = function(t) {
    var e = this.layout.options[t];
    if (e.opacity) return "opacity";
    for (var i in e) return i
  }, c.hide = function() {
    this.isHidden = !0, this.css({
      display: ""
    });
    var t = this.layout.options,
      e = {},
      i = this.getHideRevealTransitionEndProperty("hiddenStyle");
    e[i] = this.onHideTransitionEnd, this.transition({
      from: t.visibleStyle,
      to: t.hiddenStyle,
      isCleaning: !0,
      onTransitionEnd: e
    })
  }, c.onHideTransitionEnd = function() {
    this.isHidden && (this.css({
      display: "none"
    }), this.emitEvent("hide"))
  }, c.destroy = function() {
    this.css({
      position: "",
      left: "",
      right: "",
      top: "",
      bottom: "",
      transition: "",
      transform: ""
    })
  }, n
}),
function(t, e) {
  "use strict";
  "function" == typeof define && define.amd ? define("outlayer/outlayer", ["ev-emitter/ev-emitter", "get-size/get-size", "fizzy-ui-utils/utils", "./item"], function(i, n, o, s) {
    return e(t, i, n, o, s)
  }) : "object" == typeof module && module.exports ? module.exports = e(t, require("ev-emitter"), require("get-size"), require("fizzy-ui-utils"), require("./item")) : t.Outlayer = e(t, t.EvEmitter, t.getSize, t.fizzyUIUtils, t.Outlayer.Item)
}(window, function(t, e, i, n, o) {
  "use strict";

  function s(t, e) {
    var i = n.getQueryElement(t);
    if (!i) return void(h && h.error("Bad element for " + this.constructor.namespace + ": " + (i || t)));
    this.element = i, u && (this.$element = u(this.element)), this.options = n.extend({}, this.constructor.defaults), this.option(e);
    var o = ++d;
    this.element.outlayerGUID = o, f[o] = this, this._create();
    var s = this._getOption("initLayout");
    s && this.layout()
  }

  function r(t) {
    function e() {
      t.apply(this, arguments)
    }
    return e.prototype = Object.create(t.prototype), e.prototype.constructor = e, e
  }

  function a(t) {
    if ("number" == typeof t) return t;
    var e = t.match(/(^\d*\.?\d*)(\w*)/),
      i = e && e[1],
      n = e && e[2];
    if (!i.length) return 0;
    i = parseFloat(i);
    var o = p[n] || 1;
    return i * o
  }
  var h = t.console,
    u = t.jQuery,
    c = function() {},
    d = 0,
    f = {};
  s.namespace = "outlayer", s.Item = o, s.defaults = {
    containerStyle: {
      position: "relative"
    },
    initLayout: !0,
    originLeft: !0,
    originTop: !0,
    resize: !0,
    resizeContainer: !0,
    transitionDuration: "0.4s",
    hiddenStyle: {
      opacity: 0,
      transform: "scale(0.001)"
    },
    visibleStyle: {
      opacity: 1,
      transform: "scale(1)"
    }
  };
  var l = s.prototype;
  n.extend(l, e.prototype), l.option = function(t) {
    n.extend(this.options, t)
  }, l._getOption = function(t) {
    var e = this.constructor.compatOptions[t];
    return e && void 0 !== this.options[e] ? this.options[e] : this.options[t]
  }, s.compatOptions = {
    initLayout: "isInitLayout",
    horizontal: "isHorizontal",
    layoutInstant: "isLayoutInstant",
    originLeft: "isOriginLeft",
    originTop: "isOriginTop",
    resize: "isResizeBound",
    resizeContainer: "isResizingContainer"
  }, l._create = function() {
    this.reloadItems(), this.stamps = [], this.stamp(this.options.stamp), n.extend(this.element.style, this.options.containerStyle);
    var t = this._getOption("resize");
    t && this.bindResize()
  }, l.reloadItems = function() {
    this.items = this._itemize(this.element.children)
  }, l._itemize = function(t) {
    for (var e = this._filterFindItemElements(t), i = this.constructor.Item, n = [], o = 0; o < e.length; o++) {
      var s = e[o],
        r = new i(s, this);
      n.push(r)
    }
    return n
  }, l._filterFindItemElements = function(t) {
    return n.filterFindElements(t, this.options.itemSelector)
  }, l.getItemElements = function() {
    return this.items.map(function(t) {
      return t.element
    })
  }, l.layout = function() {
    this._resetLayout(), this._manageStamps();
    var t = this._getOption("layoutInstant"),
      e = void 0 !== t ? t : !this._isLayoutInited;
    this.layoutItems(this.items, e), this._isLayoutInited = !0
  }, l._init = l.layout, l._resetLayout = function() {
    this.getSize()
  }, l.getSize = function() {
    this.size = i(this.element)
  }, l._getMeasurement = function(t, e) {
    var n, o = this.options[t];
    o ? ("string" == typeof o ? n = this.element.querySelector(o) : o instanceof HTMLElement && (n = o), this[t] = n ? i(n)[e] : o) : this[t] = 0
  }, l.layoutItems = function(t, e) {
    t = this._getItemsForLayout(t), this._layoutItems(t, e), this._postLayout()
  }, l._getItemsForLayout = function(t) {
    return t.filter(function(t) {
      return !t.isIgnored
    })
  }, l._layoutItems = function(t, e) {
    if (this._emitCompleteOnItems("layout", t), t && t.length) {
      var i = [];
      t.forEach(function(t) {
        var n = this._getItemLayoutPosition(t);
        n.item = t, n.isInstant = e || t.isLayoutInstant, i.push(n)
      }, this), this._processLayoutQueue(i)
    }
  }, l._getItemLayoutPosition = function() {
    return {
      x: 0,
      y: 0
    }
  }, l._processLayoutQueue = function(t) {
    this.updateStagger(), t.forEach(function(t, e) {
      this._positionItem(t.item, t.x, t.y, t.isInstant, e)
    }, this)
  }, l.updateStagger = function() {
    var t = this.options.stagger;
    return null === t || void 0 === t ? void(this.stagger = 0) : (this.stagger = a(t), this.stagger)
  }, l._positionItem = function(t, e, i, n, o) {
    n ? t.goTo(e, i) : (t.stagger(o * this.stagger), t.moveTo(e, i))
  }, l._postLayout = function() {
    this.resizeContainer()
  }, l.resizeContainer = function() {
    var t = this._getOption("resizeContainer");
    if (t) {
      var e = this._getContainerSize();
      e && (this._setContainerMeasure(e.width, !0), this._setContainerMeasure(e.height, !1))
    }
  }, l._getContainerSize = c, l._setContainerMeasure = function(t, e) {
    if (void 0 !== t) {
      var i = this.size;
      i.isBorderBox && (t += e ? i.paddingLeft + i.paddingRight + i.borderLeftWidth + i.borderRightWidth : i.paddingBottom + i.paddingTop + i.borderTopWidth + i.borderBottomWidth), t = Math.max(t, 0), this.element.style[e ? "width" : "height"] = t + "px"
    }
  }, l._emitCompleteOnItems = function(t, e) {
    function i() {
      o.dispatchEvent(t + "Complete", null, [e])
    }

    function n() {
      r++, r == s && i()
    }
    var o = this,
      s = e.length;
    if (!e || !s) return void i();
    var r = 0;
    e.forEach(function(e) {
      e.once(t, n)
    })
  }, l.dispatchEvent = function(t, e, i) {
    var n = e ? [e].concat(i) : i;
    if (this.emitEvent(t, n), u)
      if (this.$element = this.$element || u(this.element), e) {
        var o = u.Event(e);
        o.type = t, this.$element.trigger(o, i)
      } else this.$element.trigger(t, i)
  }, l.ignore = function(t) {
    var e = this.getItem(t);
    e && (e.isIgnored = !0)
  }, l.unignore = function(t) {
    var e = this.getItem(t);
    e && delete e.isIgnored
  }, l.stamp = function(t) {
    t = this._find(t), t && (this.stamps = this.stamps.concat(t), t.forEach(this.ignore, this))
  }, l.unstamp = function(t) {
    t = this._find(t), t && t.forEach(function(t) {
      n.removeFrom(this.stamps, t), this.unignore(t)
    }, this)
  }, l._find = function(t) {
    return t ? ("string" == typeof t && (t = this.element.querySelectorAll(t)), t = n.makeArray(t)) : void 0
  }, l._manageStamps = function() {
    this.stamps && this.stamps.length && (this._getBoundingRect(), this.stamps.forEach(this._manageStamp, this))
  }, l._getBoundingRect = function() {
    var t = this.element.getBoundingClientRect(),
      e = this.size;
    this._boundingRect = {
      left: t.left + e.paddingLeft + e.borderLeftWidth,
      top: t.top + e.paddingTop + e.borderTopWidth,
      right: t.right - (e.paddingRight + e.borderRightWidth),
      bottom: t.bottom - (e.paddingBottom + e.borderBottomWidth)
    }
  }, l._manageStamp = c, l._getElementOffset = function(t) {
    var e = t.getBoundingClientRect(),
      n = this._boundingRect,
      o = i(t),
      s = {
        left: e.left - n.left - o.marginLeft,
        top: e.top - n.top - o.marginTop,
        right: n.right - e.right - o.marginRight,
        bottom: n.bottom - e.bottom - o.marginBottom
      };
    return s
  }, l.handleEvent = n.handleEvent, l.bindResize = function() {
    t.addEventListener("resize", this), this.isResizeBound = !0
  }, l.unbindResize = function() {
    t.removeEventListener("resize", this), this.isResizeBound = !1
  }, l.onresize = function() {
    this.resize()
  }, n.debounceMethod(s, "onresize", 100), l.resize = function() {
    this.isResizeBound && this.needsResizeLayout() && this.layout()
  }, l.needsResizeLayout = function() {
    var t = i(this.element),
      e = this.size && t;
    return e && t.innerWidth !== this.size.innerWidth
  }, l.addItems = function(t) {
    var e = this._itemize(t);
    return e.length && (this.items = this.items.concat(e)), e
  }, l.appended = function(t) {
    var e = this.addItems(t);
    e.length && (this.layoutItems(e, !0), this.reveal(e))
  }, l.prepended = function(t) {
    var e = this._itemize(t);
    if (e.length) {
      var i = this.items.slice(0);
      this.items = e.concat(i), this._resetLayout(), this._manageStamps(), this.layoutItems(e, !0), this.reveal(e), this.layoutItems(i)
    }
  }, l.reveal = function(t) {
    if (this._emitCompleteOnItems("reveal", t), t && t.length) {
      var e = this.updateStagger();
      t.forEach(function(t, i) {
        t.stagger(i * e), t.reveal()
      })
    }
  }, l.hide = function(t) {
    if (this._emitCompleteOnItems("hide", t), t && t.length) {
      var e = this.updateStagger();
      t.forEach(function(t, i) {
        t.stagger(i * e), t.hide()
      })
    }
  }, l.revealItemElements = function(t) {
    var e = this.getItems(t);
    this.reveal(e)
  }, l.hideItemElements = function(t) {
    var e = this.getItems(t);
    this.hide(e)
  }, l.getItem = function(t) {
    for (var e = 0; e < this.items.length; e++) {
      var i = this.items[e];
      if (i.element == t) return i
    }
  }, l.getItems = function(t) {
    t = n.makeArray(t);
    var e = [];
    return t.forEach(function(t) {
      var i = this.getItem(t);
      i && e.push(i)
    }, this), e
  }, l.remove = function(t) {
    var e = this.getItems(t);
    this._emitCompleteOnItems("remove", e), e && e.length && e.forEach(function(t) {
      t.remove(), n.removeFrom(this.items, t)
    }, this)
  }, l.destroy = function() {
    var t = this.element.style;
    t.height = "", t.position = "", t.width = "", this.items.forEach(function(t) {
      t.destroy()
    }), this.unbindResize();
    var e = this.element.outlayerGUID;
    delete f[e], delete this.element.outlayerGUID, u && u.removeData(this.element, this.constructor.namespace)
  }, s.data = function(t) {
    t = n.getQueryElement(t);
    var e = t && t.outlayerGUID;
    return e && f[e]
  }, s.create = function(t, e) {
    var i = r(s);
    return i.defaults = n.extend({}, s.defaults), n.extend(i.defaults, e), i.compatOptions = n.extend({}, s.compatOptions), i.namespace = t, i.data = s.data, i.Item = r(o), n.htmlInit(i, t), u && u.bridget && u.bridget(t, i), i
  };
  var p = {
    ms: 1,
    s: 1e3
  };
  return s.Item = o, s
}),
function(t, e) {
  "function" == typeof define && define.amd ? define("packery/js/rect", e) : "object" == typeof module && module.exports ? module.exports = e() : (t.Packery = t.Packery || {}, t.Packery.Rect = e())
}(window, function() {
  "use strict";

  function t(e) {
    for (var i in t.defaults) this[i] = t.defaults[i];
    for (i in e) this[i] = e[i]
  }
  t.defaults = {
    x: 0,
    y: 0,
    width: 0,
    height: 0
  };
  var e = t.prototype;
  return e.contains = function(t) {
    var e = t.width || 0,
      i = t.height || 0;
    return this.x <= t.x && this.y <= t.y && this.x + this.width >= t.x + e && this.y + this.height >= t.y + i
  }, e.overlaps = function(t) {
    var e = this.x + this.width,
      i = this.y + this.height,
      n = t.x + t.width,
      o = t.y + t.height;
    return this.x < n && e > t.x && this.y < o && i > t.y
  }, e.getMaximalFreeRects = function(e) {
    if (!this.overlaps(e)) return !1;
    var i, n = [],
      o = this.x + this.width,
      s = this.y + this.height,
      r = e.x + e.width,
      a = e.y + e.height;
    return this.y < e.y && (i = new t({
      x: this.x,
      y: this.y,
      width: this.width,
      height: e.y - this.y
    }), n.push(i)), o > r && (i = new t({
      x: r,
      y: this.y,
      width: o - r,
      height: this.height
    }), n.push(i)), s > a && (i = new t({
      x: this.x,
      y: a,
      width: this.width,
      height: s - a
    }), n.push(i)), this.x < e.x && (i = new t({
      x: this.x,
      y: this.y,
      width: e.x - this.x,
      height: this.height
    }), n.push(i)), n
  }, e.canFit = function(t) {
    return this.width >= t.width && this.height >= t.height
  }, t
}),
function(t, e) {
  if ("function" == typeof define && define.amd) define("packery/js/packer", ["./rect"], e);
  else if ("object" == typeof module && module.exports) module.exports = e(require("./rect"));
  else {
    var i = t.Packery = t.Packery || {};
    i.Packer = e(i.Rect)
  }
}(window, function(t) {
  "use strict";

  function e(t, e, i) {
    this.width = t || 0, this.height = e || 0, this.sortDirection = i || "downwardLeftToRight", this.reset()
  }
  var i = e.prototype;
  i.reset = function() {
    this.spaces = [];
    var e = new t({
      x: 0,
      y: 0,
      width: this.width,
      height: this.height
    });
    this.spaces.push(e), this.sorter = n[this.sortDirection] || n.downwardLeftToRight
  }, i.pack = function(t) {
    for (var e = 0; e < this.spaces.length; e++) {
      var i = this.spaces[e];
      if (i.canFit(t)) {
        this.placeInSpace(t, i);
        break
      }
    }
  }, i.columnPack = function(t) {
    for (var e = 0; e < this.spaces.length; e++) {
      var i = this.spaces[e],
        n = i.x <= t.x && i.x + i.width >= t.x + t.width && i.height >= t.height - .01;
      if (n) {
        t.y = i.y, this.placed(t);
        break
      }
    }
  }, i.rowPack = function(t) {
    for (var e = 0; e < this.spaces.length; e++) {
      var i = this.spaces[e],
        n = i.y <= t.y && i.y + i.height >= t.y + t.height && i.width >= t.width - .01;
      if (n) {
        t.x = i.x, this.placed(t);
        break
      }
    }
  }, i.placeInSpace = function(t, e) {
    t.x = e.x, t.y = e.y, this.placed(t)
  }, i.placed = function(t) {
    for (var e = [], i = 0; i < this.spaces.length; i++) {
      var n = this.spaces[i],
        o = n.getMaximalFreeRects(t);
      o ? e.push.apply(e, o) : e.push(n)
    }
    this.spaces = e, this.mergeSortSpaces()
  }, i.mergeSortSpaces = function() {
    e.mergeRects(this.spaces), this.spaces.sort(this.sorter)
  }, i.addSpace = function(t) {
    this.spaces.push(t), this.mergeSortSpaces()
  }, e.mergeRects = function(t) {
    var e = 0,
      i = t[e];
    t: for (; i;) {
      for (var n = 0, o = t[e + n]; o;) {
        if (o == i) n++;
        else {
          if (o.contains(i)) {
            t.splice(e, 1), i = t[e];
            continue t
          }
          i.contains(o) ? t.splice(e + n, 1) : n++
        }
        o = t[e + n]
      }
      e++, i = t[e]
    }
    return t
  };
  var n = {
    downwardLeftToRight: function(t, e) {
      return t.y - e.y || t.x - e.x
    },
    rightwardTopToBottom: function(t, e) {
      return t.x - e.x || t.y - e.y
    }
  };
  return e
}),
function(t, e) {
  "function" == typeof define && define.amd ? define("packery/js/item", ["outlayer/outlayer", "./rect"], e) : "object" == typeof module && module.exports ? module.exports = e(require("outlayer"), require("./rect")) : t.Packery.Item = e(t.Outlayer, t.Packery.Rect)
}(window, function(t, e) {
  "use strict";
  var i = document.documentElement.style,
    n = "string" == typeof i.transform ? "transform" : "WebkitTransform",
    o = function() {
      t.Item.apply(this, arguments)
    },
    s = o.prototype = Object.create(t.Item.prototype),
    r = s._create;
  s._create = function() {
    r.call(this), this.rect = new e
  };
  var a = s.moveTo;
  return s.moveTo = function(t, e) {
    var i = Math.abs(this.position.x - t),
      n = Math.abs(this.position.y - e),
      o = this.layout.dragItemCount && !this.isPlacing && !this.isTransitioning && 1 > i && 1 > n;
    return o ? void this.goTo(t, e) : void a.apply(this, arguments)
  }, s.enablePlacing = function() {
    this.removeTransitionStyles(), this.isTransitioning && n && (this.element.style[n] = "none"), this.isTransitioning = !1, this.getSize(), this.layout._setRectSize(this.element, this.rect), this.isPlacing = !0
  }, s.disablePlacing = function() {
    this.isPlacing = !1
  }, s.removeElem = function() {
    this.element.parentNode.removeChild(this.element), this.layout.packer.addSpace(this.rect), this.emitEvent("remove", [this])
  }, s.showDropPlaceholder = function() {
    var t = this.dropPlaceholder;
    t || (t = this.dropPlaceholder = document.createElement("div"), t.className = "packery-drop-placeholder", t.style.position = "absolute"), t.style.width = this.size.width + "px", t.style.height = this.size.height + "px", this.positionDropPlaceholder(), this.layout.element.appendChild(t)
  }, s.positionDropPlaceholder = function() {
    this.dropPlaceholder.style[n] = "translate(" + this.rect.x + "px, " + this.rect.y + "px)"
  }, s.hideDropPlaceholder = function() {
    var t = this.dropPlaceholder.parentNode;
    t && t.removeChild(this.dropPlaceholder)
  }, o
}),
function(t, e) {
  "function" == typeof define && define.amd ? define(["get-size/get-size", "outlayer/outlayer", "packery/js/rect", "packery/js/packer", "packery/js/item"], e) : "object" == typeof module && module.exports ? module.exports = e(require("get-size"), require("outlayer"), require("./rect"), require("./packer"), require("./item")) : t.Packery = e(t.getSize, t.Outlayer, t.Packery.Rect, t.Packery.Packer, t.Packery.Item)
}(window, function(t, e, i, n, o) {
  "use strict";

  function s(t, e) {
    return t.position.y - e.position.y || t.position.x - e.position.x
  }

  function r(t, e) {
    return t.position.x - e.position.x || t.position.y - e.position.y
  }

  function a(t, e) {
    var i = e.x - t.x,
      n = e.y - t.y;
    return Math.sqrt(i * i + n * n)
  }
  i.prototype.canFit = function(t) {
    return this.width >= t.width - 1 && this.height >= t.height - 1
  };
  var h = e.create("packery");
  h.Item = o;
  var u = h.prototype;
  u._create = function() {
    e.prototype._create.call(this), this.packer = new n, this.shiftPacker = new n, this.isEnabled = !0, this.dragItemCount = 0;
    var t = this;
    this.handleDraggabilly = {
      dragStart: function() {
        t.itemDragStart(this.element)
      },
      dragMove: function() {
        t.itemDragMove(this.element, this.position.x, this.position.y)
      },
      dragEnd: function() {
        t.itemDragEnd(this.element)
      }
    }, this.handleUIDraggable = {
      start: function(e, i) {
        i && t.itemDragStart(e.currentTarget)
      },
      drag: function(e, i) {
        i && t.itemDragMove(e.currentTarget, i.position.left, i.position.top)
      },
      stop: function(e, i) {
        i && t.itemDragEnd(e.currentTarget)
      }
    }
  }, u._resetLayout = function() {
    this.getSize(), this._getMeasurements();
    var t, e, i;
    this._getOption("horizontal") ? (t = 1 / 0, e = this.size.innerHeight + this.gutter, i = "rightwardTopToBottom") : (t = this.size.innerWidth + this.gutter, e = 1 / 0, i = "downwardLeftToRight"), this.packer.width = this.shiftPacker.width = t, this.packer.height = this.shiftPacker.height = e, this.packer.sortDirection = this.shiftPacker.sortDirection = i, this.packer.reset(), this.maxY = 0, this.maxX = 0
  }, u._getMeasurements = function() {
    this._getMeasurement("columnWidth", "width"), this._getMeasurement("rowHeight", "height"), this._getMeasurement("gutter", "width")
  }, u._getItemLayoutPosition = function(t) {
    if (this._setRectSize(t.element, t.rect), this.isShifting || this.dragItemCount > 0) {
      var e = this._getPackMethod();
      this.packer[e](t.rect)
    } else this.packer.pack(t.rect);
    return this._setMaxXY(t.rect), t.rect
  }, u.shiftLayout = function() {
    this.isShifting = !0, this.layout(), delete this.isShifting
  }, u._getPackMethod = function() {
    return this._getOption("horizontal") ? "rowPack" : "columnPack"
  }, u._setMaxXY = function(t) {
    this.maxX = Math.max(t.x + t.width, this.maxX), this.maxY = Math.max(t.y + t.height, this.maxY)
  }, u._setRectSize = function(e, i) {
    var n = t(e),
      o = n.outerWidth,
      s = n.outerHeight;
    (o || s) && (o = this._applyGridGutter(o, this.columnWidth), s = this._applyGridGutter(s, this.rowHeight)), i.width = Math.min(o, this.packer.width), i.height = Math.min(s, this.packer.height)
  }, u._applyGridGutter = function(t, e) {
    if (!e) return t + this.gutter;
    e += this.gutter;
    var i = t % e,
      n = i && 1 > i ? "round" : "ceil";
    return t = Math[n](t / e) * e
  }, u._getContainerSize = function() {
    return this._getOption("horizontal") ? {
      width: this.maxX - this.gutter
    } : {
      height: this.maxY - this.gutter
    }
  }, u._manageStamp = function(t) {
    var e, n = this.getItem(t);
    if (n && n.isPlacing) e = n.rect;
    else {
      var o = this._getElementOffset(t);
      e = new i({
        x: this._getOption("originLeft") ? o.left : o.right,
        y: this._getOption("originTop") ? o.top : o.bottom
      })
    }
    this._setRectSize(t, e), this.packer.placed(e), this._setMaxXY(e)
  }, u.sortItemsByPosition = function() {
    var t = this._getOption("horizontal") ? r : s;
    this.items.sort(t)
  }, u.fit = function(t, e, i) {
    var n = this.getItem(t);
    n && (this.stamp(n.element), n.enablePlacing(), this.updateShiftTargets(n), e = void 0 === e ? n.rect.x : e, i = void 0 === i ? n.rect.y : i, this.shift(n, e, i), this._bindFitEvents(n), n.moveTo(n.rect.x, n.rect.y), this.shiftLayout(), this.unstamp(n.element), this.sortItemsByPosition(), n.disablePlacing())
  }, u._bindFitEvents = function(t) {
    function e() {
      n++, 2 == n && i.dispatchEvent("fitComplete", null, [t])
    }
    var i = this,
      n = 0;
    t.once("layout", e), this.once("layoutComplete", e)
  }, u.resize = function() {
    this.isResizeBound && this.needsResizeLayout() && (this.options.shiftPercentResize ? this.resizeShiftPercentLayout() : this.layout())
  }, u.needsResizeLayout = function() {
    var e = t(this.element),
      i = this._getOption("horizontal") ? "innerHeight" : "innerWidth";
    return e[i] != this.size[i]
  }, u.resizeShiftPercentLayout = function() {
    var e = this._getItemsForLayout(this.items),
      i = this._getOption("horizontal"),
      n = i ? "y" : "x",
      o = i ? "height" : "width",
      s = i ? "rowHeight" : "columnWidth",
      r = i ? "innerHeight" : "innerWidth",
      a = this[s];
    if (a = a && a + this.gutter) {
      this._getMeasurements();
      var h = this[s] + this.gutter;
      e.forEach(function(t) {
        var e = Math.round(t.rect[n] / a);
        t.rect[n] = e * h
      })
    } else {
      var u = t(this.element)[r] + this.gutter,
        c = this.packer[o];
      e.forEach(function(t) {
        t.rect[n] = t.rect[n] / c * u
      })
    }
    this.shiftLayout()
  }, u.itemDragStart = function(t) {
    if (this.isEnabled) {
      this.stamp(t);
      var e = this.getItem(t);
      e && (e.enablePlacing(), e.showDropPlaceholder(), this.dragItemCount++, this.updateShiftTargets(e))
    }
  }, u.updateShiftTargets = function(t) {
    this.shiftPacker.reset(), this._getBoundingRect();
    var e = this._getOption("originLeft"),
      n = this._getOption("originTop");
    this.stamps.forEach(function(t) {
      var o = this.getItem(t);
      if (!o || !o.isPlacing) {
        var s = this._getElementOffset(t),
          r = new i({
            x: e ? s.left : s.right,
            y: n ? s.top : s.bottom
          });
        this._setRectSize(t, r), this.shiftPacker.placed(r)
      }
    }, this);
    var o = this._getOption("horizontal"),
      s = o ? "rowHeight" : "columnWidth",
      r = o ? "height" : "width";
    this.shiftTargetKeys = [], this.shiftTargets = [];
    var a, h = this[s];
    if (h = h && h + this.gutter) {
      var u = Math.ceil(t.rect[r] / h),
        c = Math.floor((this.shiftPacker[r] + this.gutter) / h);
      a = (c - u) * h;
      for (var d = 0; c > d; d++) {
        var f = o ? 0 : d * h,
          l = o ? d * h : 0;
        this._addShiftTarget(f, l, a)
      }
    } else a = this.shiftPacker[r] + this.gutter - t.rect[r], this._addShiftTarget(0, 0, a);
    var p = this._getItemsForLayout(this.items),
      g = this._getPackMethod();
    p.forEach(function(t) {
      var e = t.rect;
      this._setRectSize(t.element, e), this.shiftPacker[g](e), this._addShiftTarget(e.x, e.y, a);
      var i = o ? e.x + e.width : e.x,
        n = o ? e.y : e.y + e.height;
      if (this._addShiftTarget(i, n, a), h)
        for (var s = Math.round(e[r] / h), u = 1; s > u; u++) {
          var c = o ? i : e.x + h * u,
            d = o ? e.y + h * u : n;
          this._addShiftTarget(c, d, a)
        }
    }, this)
  }, u._addShiftTarget = function(t, e, i) {
    var n = this._getOption("horizontal") ? e : t;
    if (!(0 !== n && n > i)) {
      var o = t + "," + e,
        s = -1 != this.shiftTargetKeys.indexOf(o);
      s || (this.shiftTargetKeys.push(o), this.shiftTargets.push({
        x: t,
        y: e
      }))
    }
  }, u.shift = function(t, e, i) {
    var n, o = 1 / 0,
      s = {
        x: e,
        y: i
      };
    this.shiftTargets.forEach(function(t) {
      var e = a(t, s);
      o > e && (n = t, o = e)
    }), t.rect.x = n.x, t.rect.y = n.y
  };
  var c = 120;
  u.itemDragMove = function(t, e, i) {
    function n() {
      s.shift(o, e, i), o.positionDropPlaceholder(), s.layout()
    }
    var o = this.isEnabled && this.getItem(t);
    if (o) {
      e -= this.size.paddingLeft, i -= this.size.paddingTop;
      var s = this,
        r = new Date;
      this._itemDragTime && r - this._itemDragTime < c ? (clearTimeout(this.dragTimeout), this.dragTimeout = setTimeout(n, c)) : (n(), this._itemDragTime = r)
    }
  }, u.itemDragEnd = function(t) {
    function e() {
      n++, 2 == n && (i.element.classList.remove("is-positioning-post-drag"), i.hideDropPlaceholder(), o.dispatchEvent("dragItemPositioned", null, [i]))
    }
    var i = this.isEnabled && this.getItem(t);
    if (i) {
      clearTimeout(this.dragTimeout), i.element.classList.add("is-positioning-post-drag");
      var n = 0,
        o = this;
      i.once("layout", e), this.once("layoutComplete", e), i.moveTo(i.rect.x, i.rect.y), this.layout(), this.dragItemCount = Math.max(0, this.dragItemCount - 1), this.sortItemsByPosition(), i.disablePlacing(), this.unstamp(i.element)
    }
  }, u.bindDraggabillyEvents = function(t) {
    this._bindDraggabillyEvents(t, "on")
  }, u.unbindDraggabillyEvents = function(t) {
    this._bindDraggabillyEvents(t, "off")
  }, u._bindDraggabillyEvents = function(t, e) {
    var i = this.handleDraggabilly;
    t[e]("dragStart", i.dragStart), t[e]("dragMove", i.dragMove), t[e]("dragEnd", i.dragEnd)
  }, u.bindUIDraggableEvents = function(t) {
    this._bindUIDraggableEvents(t, "on")
  }, u.unbindUIDraggableEvents = function(t) {
    this._bindUIDraggableEvents(t, "off")
  }, u._bindUIDraggableEvents = function(t, e) {
    var i = this.handleUIDraggable;
    t[e]("dragstart", i.start)[e]("drag", i.drag)[e]("dragstop", i.stop)
  };
  var d = u.destroy;
  return u.destroy = function() {
    d.apply(this, arguments), this.isEnabled = !1
  }, h.Rect = i, h.Packer = n, h
});

/**
* my packery 
*/

$('.grid').packery({
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer'
  }
});

AOS.init({
  duration: 1200
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.js"></script>

style.scss

* {
  box-sizing: border-box;
}


/* force scrollbar, prevents initial gap */

html {
  overflow-y: scroll;
}

body {
  font-family: sans-serif;
  background-color: #111;
}

h1 {
  font-size: 16px;
  font-weight: 300;
  margin: 44px 0;
  color: #e8e8e8;
}


/* max-width wrapper */

.wrapper {
  max-width: 1250px;
  margin: 0 auto;
  overflow: hidden;
}


/* grid */

.grid {
  background: #111;
  font-size: 0;
  margin-left: -8px;
}


/* clear fix
.grid:after {
  content: '';
  display: block;
  clear: both;
}
*/


/* .element-item */


/* 4 columns, percentage width */

.grid-item,
.grid-sizer {
  width: 50%;
}

@media (min-width: 950px) {
  /* 4 columns, percentage width */
  .grid-item,
  .grid-sizer {
    width: 25%;
  }
}

.grid-item {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  padding-left: 8px;
}

.grid-item div {
  height: 200px;
  margin-bottom: 8px;
}

.grid-item--width2 {
  width: 100%;
}

@media (min-width: 950px) {
  .grid-item--width2 {
    width: 50%;
  }
}

.grid-item--height2 div {
  height: 408px;
}

.grid-item div {
  background-color: slateblue;
}


/* demo only background colors */

/*.grid-item div {
    opacity: 0;
    transition: all 1s ease;
}

.grid-item.in-view div {
  opacity: 1;
}*/

styles

<link href="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.css" rel="stylesheet" />