├── img ├── dummy.png └── loading.gif ├── fonts └── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.ttf │ ├── codropsicons.woff │ ├── license.txt │ └── codropsicons.svg ├── README.md ├── css ├── normalize.css ├── demo.css └── component.css ├── js ├── classie.js ├── colorfinder-1.1.js ├── imagesloaded.pkgd.min.js ├── gridScrollFx.js ├── modernizr.custom.js └── masonry.pkgd.min.js ├── index.html ├── index2.html └── index3.html /img/dummy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SamsungGrid/HEAD/img/dummy.png -------------------------------------------------------------------------------- /img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SamsungGrid/HEAD/img/loading.gif -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SamsungGrid/HEAD/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SamsungGrid/HEAD/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SamsungGrid/HEAD/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Grid Loading and Hover Effect 2 | ========= 3 | 4 | Recreating the grid loading effect as seen on the Samsung Corporate Design Center website. 5 | 6 | [Article on Codrops](http://tympanus.net/codrops/?p=19069) 7 | 8 | [Demo](http://tympanus.net/Tutorials/SamsungGrid/) 9 | 10 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 11 | 12 | Read more here: [License](http://tympanus.net/codrops/licensing/) 13 | 14 | 15 | [© Codrops 2014](http://www.codrops.com) -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,900); 2 | @font-face { 3 | font-weight: normal; 4 | font-style: normal; 5 | font-family: 'codropsicons'; 6 | src:url('../fonts/codropsicons/codropsicons.eot'); 7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 11 | } 12 | 13 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 14 | .clearfix:before, .clearfix:after { content: ''; display: table; } 15 | .clearfix:after { clear: both; } 16 | 17 | body { 18 | background: #D3EEE2; 19 | color: #2E3444; 20 | font-size: 100%; 21 | line-height: 1.25; 22 | font-family: 'Lato', sans-serif; 23 | font-weight: 300; 24 | } 25 | 26 | a { 27 | color: #FF2A48; 28 | text-decoration: none; 29 | outline: none; 30 | } 31 | 32 | a:hover, a:focus { 33 | color: #2E3444; 34 | } 35 | 36 | .codrops-header { 37 | margin: 0 auto; 38 | padding: 2em; 39 | text-align: center; 40 | } 41 | 42 | .codrops-header h1 { 43 | margin: 0; 44 | font-size: 2.5em; 45 | font-weight: 900; 46 | } 47 | 48 | .codrops-header h1 span { 49 | display: block; 50 | padding: 0.2em 0 0.6em 0.1em; 51 | font-size: 0.6em; 52 | font-weight: 300; 53 | } 54 | 55 | /* Demo links */ 56 | .codrops-demos { 57 | padding-top: 50px; 58 | } 59 | 60 | .codrops-demos a { 61 | text-transform: uppercase; 62 | letter-spacing: 1px; 63 | margin: 15px; 64 | padding: 5px 2px; 65 | font-weight: 900; 66 | } 67 | 68 | .codrops-demos a.current-demo { 69 | color: #2E3444; 70 | } 71 | 72 | /* To Navigation Style */ 73 | .codrops-top { 74 | width: 100%; 75 | text-transform: uppercase; 76 | font-weight: 800; 77 | font-style: normal; 78 | font-size: 0.69em; 79 | line-height: 2.2; 80 | } 81 | 82 | .codrops-top a { 83 | display: inline-block; 84 | padding: 0 1em; 85 | text-decoration: none; 86 | letter-spacing: 1px; 87 | } 88 | 89 | .codrops-top span.right { 90 | float: right; 91 | } 92 | 93 | .codrops-top span.right a { 94 | display: block; 95 | float: left; 96 | } 97 | 98 | .codrops-icon:before { 99 | margin: 0 4px; 100 | text-transform: none; 101 | font-weight: normal; 102 | font-style: normal; 103 | font-variant: normal; 104 | font-family: 'codropsicons'; 105 | line-height: 1; 106 | speak: none; 107 | -webkit-font-smoothing: antialiased; 108 | } 109 | 110 | .codrops-icon-drop:before { 111 | content: "\e001"; 112 | } 113 | 114 | .codrops-icon-prev:before { 115 | content: "\e004"; 116 | } 117 | 118 | section { 119 | padding: 1em; 120 | text-align: center; 121 | } 122 | 123 | .related { 124 | padding: 15em 0 3em; 125 | clear: both; 126 | } 127 | 128 | .related p { 129 | font-size: 1.5em; 130 | } 131 | 132 | .related > a { 133 | border: 1px solid #2E3444; 134 | display: inline-block; 135 | text-align: center; 136 | margin: 20px 10px; 137 | padding: 25px; 138 | color: #2E3444; 139 | } 140 | 141 | .related a:hover { 142 | border-color: #FF2A48; 143 | color: #FF2A48; 144 | } 145 | 146 | .related a img { 147 | max-width: 100%; 148 | opacity: 0.8; 149 | } 150 | 151 | .related a:hover img, 152 | .related a:active img { 153 | opacity: 1; 154 | } 155 | 156 | .related a h3 { 157 | margin: 0; 158 | padding: 0.5em 0 0.3em; 159 | max-width: 300px; 160 | text-align: left; 161 | } 162 | 163 | @media screen and (max-width: 25em) { 164 | 165 | .codrops-icon span { 166 | display: none; 167 | } 168 | 169 | } -------------------------------------------------------------------------------- /js/colorfinder-1.1.js: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2013 Pieroxy 2 | // This work is free. You can redistribute it and/or modify it 3 | // under the terms of the WTFPL, Version 2 4 | // For more information see LICENSE.txt or http://www.wtfpl.net/ 5 | // 6 | // For more information, the home page: 7 | // http://pieroxy.net/blog/pages/color-finder/index.html 8 | // 9 | // Detection of the most prominent color in an image 10 | // version 1.1.1 11 | 12 | function ColorFinder(colorFactorCallback) { 13 | this.callback = colorFactorCallback; 14 | this.getMostProminentColor = function(imgEl) { 15 | var rgb = null; 16 | if (!this.callback) this.callback = function() { return 1; }; 17 | var data = this.getImageData(imgEl); 18 | rgb = this.getMostProminentRGBImpl(data, 6, rgb, this.callback); 19 | rgb = this.getMostProminentRGBImpl(data, 4, rgb, this.callback); 20 | rgb = this.getMostProminentRGBImpl(data, 2, rgb, this.callback); 21 | rgb = this.getMostProminentRGBImpl(data, 0, rgb, this.callback); 22 | return rgb; 23 | }; 24 | 25 | this.getImageData = function(imgEl, degrade, rgbMatch, colorFactorCallback) { 26 | 27 | var rgb, 28 | canvas = document.createElement('canvas'), 29 | context = canvas.getContext && canvas.getContext('2d'), 30 | data, width, height, key, 31 | i = -4, 32 | db={}, 33 | length,r,g,b, 34 | count = 0; 35 | 36 | if (!context) { 37 | return defaultRGB; 38 | } 39 | 40 | height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height; 41 | width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width; 42 | 43 | context.drawImage(imgEl, 0, 0); 44 | 45 | try { 46 | data = context.getImageData(0, 0, width, height); 47 | } catch(e) { 48 | /* security error, img on diff domain */ 49 | return null; 50 | } 51 | 52 | length = data.data.length; 53 | 54 | var factor = Math.max(1,Math.round(length/5000)); 55 | var result = {}; 56 | 57 | while ( (i += 4*factor) < length ) { 58 | if (data.data[i+3]>32) { 59 | key = (data.data[i]>>degrade) + "," + (data.data[i+1]>>degrade) + "," + (data.data[i+2]>>degrade); 60 | if (!result.hasOwnProperty(key)) { 61 | rgb = {r:data.data[i], g:data.data[i+1], b:data.data[i+2],count:1}; 62 | rgb.weight = this.callback(rgb.r, rgb.g, rgb.b); 63 | if (rgb.weight<=0) rgb.weight = 1e-10; 64 | result[key]=rgb; 65 | } else { 66 | rgb=result[key]; 67 | rgb.count++; 68 | } 69 | } 70 | } 71 | 72 | return result; 73 | 74 | }; 75 | 76 | this.getMostProminentRGBImpl = function(pixels, degrade, rgbMatch, colorFactorCallback) { 77 | 78 | var rgb = {r:0,g:0,b:0,count:0,d:degrade}, 79 | db={}, 80 | pixel,pixelKey,pixelGroupKey, 81 | length,r,g,b, 82 | count = 0; 83 | 84 | 85 | for (pixelKey in pixels) { 86 | pixel = pixels[pixelKey]; 87 | totalWeight = pixel.weight * pixel.count; 88 | ++count; 89 | if (this.doesRgbMatch(rgbMatch, pixel.r, pixel.g, pixel.b)) { 90 | pixelGroupKey = (pixel.r>>degrade) + "," + (pixel.g>>degrade) + "," + (pixel.b>>degrade); 91 | if (db.hasOwnProperty(pixelGroupKey)) 92 | db[pixelGroupKey]+=totalWeight; 93 | else 94 | db[pixelGroupKey]=totalWeight; 95 | } 96 | } 97 | 98 | for (i in db) { 99 | data = i.split(","); 100 | r = data[0]; 101 | g = data[1]; 102 | b = data[2]; 103 | count = db[i]; 104 | 105 | if (count>rgb.count) { 106 | rgb.count = count; 107 | data = i.split(","); 108 | rgb.r = r; 109 | rgb.g = g; 110 | rgb.b = b; 111 | } 112 | } 113 | 114 | return rgb; 115 | 116 | }; 117 | 118 | this.doesRgbMatch = function(rgb,r,g,b) { 119 | if (rgb==null) return true; 120 | r = r >> rgb.d; 121 | g = g >> rgb.d; 122 | b = b >> rgb.d; 123 | return rgb.r == r && rgb.g == g && rgb.b == b; 124 | } 125 | 126 | } 127 | -------------------------------------------------------------------------------- /js/imagesloaded.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v3.1.6 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | 7 | (function(){function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var i=e.prototype,r=this,o=r.EventEmitter;i.getListeners=function(e){var t,n,i=this._getEvents();if("object"==typeof e){t={};for(n in i)i.hasOwnProperty(n)&&e.test(n)&&(t[n]=i[n])}else t=i[e]||(i[e]=[]);return t},i.flattenListeners=function(e){var t,n=[];for(t=0;e.length>t;t+=1)n.push(e[t].listener);return n},i.getListenersAsObject=function(e){var t,n=this.getListeners(e);return n instanceof Array&&(t={},t[e]=n),t||n},i.addListener=function(e,n){var i,r=this.getListenersAsObject(e),o="object"==typeof n;for(i in r)r.hasOwnProperty(i)&&-1===t(r[i],n)&&r[i].push(o?n:{listener:n,once:!1});return this},i.on=n("addListener"),i.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},i.once=n("addOnceListener"),i.defineEvent=function(e){return this.getListeners(e),this},i.defineEvents=function(e){for(var t=0;e.length>t;t+=1)this.defineEvent(e[t]);return this},i.removeListener=function(e,n){var i,r,o=this.getListenersAsObject(e);for(r in o)o.hasOwnProperty(r)&&(i=t(o[r],n),-1!==i&&o[r].splice(i,1));return this},i.off=n("removeListener"),i.addListeners=function(e,t){return this.manipulateListeners(!1,e,t)},i.removeListeners=function(e,t){return this.manipulateListeners(!0,e,t)},i.manipulateListeners=function(e,t,n){var i,r,o=e?this.removeListener:this.addListener,s=e?this.removeListeners:this.addListeners;if("object"!=typeof t||t instanceof RegExp)for(i=n.length;i--;)o.call(this,t,n[i]);else for(i in t)t.hasOwnProperty(i)&&(r=t[i])&&("function"==typeof r?o.call(this,i,r):s.call(this,i,r));return this},i.removeEvent=function(e){var t,n=typeof e,i=this._getEvents();if("string"===n)delete i[e];else if("object"===n)for(t in i)i.hasOwnProperty(t)&&e.test(t)&&delete i[t];else delete this._events;return this},i.removeAllListeners=n("removeEvent"),i.emitEvent=function(e,t){var n,i,r,o,s=this.getListenersAsObject(e);for(r in s)if(s.hasOwnProperty(r))for(i=s[r].length;i--;)n=s[r][i],n.once===!0&&this.removeListener(e,n.listener),o=n.listener.apply(this,t||[]),o===this._getOnceReturnValue()&&this.removeListener(e,n.listener);return this},i.trigger=n("emitEvent"),i.emit=function(e){var t=Array.prototype.slice.call(arguments,1);return this.emitEvent(e,t)},i.setOnceReturnValue=function(e){return this._onceReturnValue=e,this},i._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},i._getEvents=function(){return this._events||(this._events={})},e.noConflict=function(){return r.EventEmitter=o,e},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return e}):"object"==typeof module&&module.exports?module.exports=e:this.EventEmitter=e}).call(this),function(e){function t(t){var n=e.event;return n.target=n.target||n.srcElement||t,n}var n=document.documentElement,i=function(){};n.addEventListener?i=function(e,t,n){e.addEventListener(t,n,!1)}:n.attachEvent&&(i=function(e,n,i){e[n+i]=i.handleEvent?function(){var n=t(e);i.handleEvent.call(i,n)}:function(){var n=t(e);i.call(e,n)},e.attachEvent("on"+n,e[n+i])});var r=function(){};n.removeEventListener?r=function(e,t,n){e.removeEventListener(t,n,!1)}:n.detachEvent&&(r=function(e,t,n){e.detachEvent("on"+t,e[t+n]);try{delete e[t+n]}catch(i){e[t+n]=void 0}});var o={bind:i,unbind:r};"function"==typeof define&&define.amd?define("eventie/eventie",o):e.eventie=o}(this),function(e,t){"function"==typeof define&&define.amd?define(["eventEmitter/EventEmitter","eventie/eventie"],function(n,i){return t(e,n,i)}):"object"==typeof exports?module.exports=t(e,require("eventEmitter"),require("eventie")):e.imagesLoaded=t(e,e.EventEmitter,e.eventie)}(this,function(e,t,n){function i(e,t){for(var n in t)e[n]=t[n];return e}function r(e){return"[object Array]"===d.call(e)}function o(e){var t=[];if(r(e))t=e;else if("number"==typeof e.length)for(var n=0,i=e.length;i>n;n++)t.push(e[n]);else t.push(e);return t}function s(e,t,n){if(!(this instanceof s))return new s(e,t);"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=o(e),this.options=i({},this.options),"function"==typeof t?n=t:i(this.options,t),n&&this.on("always",n),this.getImages(),a&&(this.jqDeferred=new a.Deferred);var r=this;setTimeout(function(){r.check()})}function c(e){this.img=e}function f(e){this.src=e,v[e]=this}var a=e.jQuery,u=e.console,h=u!==void 0,d=Object.prototype.toString;s.prototype=new t,s.prototype.options={},s.prototype.getImages=function(){this.images=[];for(var e=0,t=this.elements.length;t>e;e++){var n=this.elements[e];"IMG"===n.nodeName&&this.addImage(n);var i=n.nodeType;if(i&&(1===i||9===i||11===i))for(var r=n.querySelectorAll("img"),o=0,s=r.length;s>o;o++){var c=r[o];this.addImage(c)}}},s.prototype.addImage=function(e){var t=new c(e);this.images.push(t)},s.prototype.check=function(){function e(e,r){return t.options.debug&&h&&u.log("confirm",e,r),t.progress(e),n++,n===i&&t.complete(),!0}var t=this,n=0,i=this.images.length;if(this.hasAnyBroken=!1,!i)return this.complete(),void 0;for(var r=0;i>r;r++){var o=this.images[r];o.on("confirm",e),o.check()}},s.prototype.progress=function(e){this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded;var t=this;setTimeout(function(){t.emit("progress",t,e),t.jqDeferred&&t.jqDeferred.notify&&t.jqDeferred.notify(t,e)})},s.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";this.isComplete=!0;var t=this;setTimeout(function(){if(t.emit(e,t),t.emit("always",t),t.jqDeferred){var n=t.hasAnyBroken?"reject":"resolve";t.jqDeferred[n](t)}})},a&&(a.fn.imagesLoaded=function(e,t){var n=new s(this,e,t);return n.jqDeferred.promise(a(this))}),c.prototype=new t,c.prototype.check=function(){var e=v[this.img.src]||new f(this.img.src);if(e.isConfirmed)return this.confirm(e.isLoaded,"cached was confirmed"),void 0;if(this.img.complete&&void 0!==this.img.naturalWidth)return this.confirm(0!==this.img.naturalWidth,"naturalWidth"),void 0;var t=this;e.on("confirm",function(e,n){return t.confirm(e.isLoaded,n),!0}),e.check()},c.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("confirm",this,t)};var v={};return f.prototype=new t,f.prototype.check=function(){if(!this.isChecked){var e=new Image;n.bind(e,"load",this),n.bind(e,"error",this),e.src=this.src,this.isChecked=!0}},f.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},f.prototype.onload=function(e){this.confirm(!0,"onload"),this.unbindProxyEvents(e)},f.prototype.onerror=function(e){this.confirm(!1,"onerror"),this.unbindProxyEvents(e)},f.prototype.confirm=function(e,t){this.isConfirmed=!0,this.isLoaded=e,this.emit("confirm",this,t)},f.prototype.unbindProxyEvents=function(e){n.unbind(e.target,"load",this),n.unbind(e.target,"error",this)},s}); -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | .grid-wrap { 2 | clear: both; 3 | margin: 0 auto; 4 | padding: 0; 5 | max-width: 1260px; 6 | } 7 | 8 | .grid { 9 | margin: 30px auto; 10 | padding: 0; 11 | list-style: none; 12 | min-height: 500px; 13 | } 14 | 15 | .js .grid { 16 | background: url(../img/loading.gif) no-repeat 50% 100px; 17 | } 18 | 19 | .js .grid.loaded { 20 | background: none; 21 | } 22 | 23 | .grid li { 24 | display: inline-block; 25 | overflow: hidden; 26 | width: 314px; 27 | text-align: left; 28 | vertical-align: top; 29 | } 30 | 31 | .js .grid li { 32 | display: none; 33 | float: left; 34 | } 35 | 36 | .js .grid.loaded li { 37 | display: block; 38 | } 39 | 40 | /* Title box */ 41 | .title-box h2 { 42 | display: block; 43 | margin: 7px; 44 | padding: 20px; 45 | background: #2E3444; 46 | color: #D3EEE2; 47 | text-transform: uppercase; 48 | letter-spacing: 1px; 49 | font-weight: 300; 50 | } 51 | 52 | .title-box h2 a { 53 | display: block; 54 | font-weight: 900; 55 | } 56 | 57 | .title-box h2 a:hover { 58 | color: #D3EEE2; 59 | } 60 | 61 | /* Anchor and image */ 62 | .grid li > a, 63 | .grid li img { 64 | display: block; 65 | outline: none; 66 | border: none; 67 | } 68 | 69 | .grid li > a { 70 | position: relative; 71 | overflow: hidden; 72 | margin: 7px; 73 | } 74 | 75 | /* Curtain element */ 76 | .grid .curtain { 77 | position: absolute; 78 | top: 0; 79 | left: 0; 80 | z-index: 100; 81 | width: 100%; 82 | height: 100%; 83 | background: #96cdc8; 84 | } 85 | 86 | .grid.swipe-right .curtain { 87 | -webkit-transform: translate3d(-100%,0,0); 88 | transform: translate3d(-100%,0,0); 89 | } 90 | 91 | .grid.swipe-down .curtain { 92 | -webkit-transform: translate3d(0,-100%,0); 93 | transform: translate3d(0,-100%,0); 94 | } 95 | 96 | .grid.swipe-rotate .curtain { 97 | width: 200%; 98 | height: 200%; 99 | -webkit-transform: rotate3d(0,0,1,90deg); 100 | transform: rotate3d(0,0,1,90deg); 101 | -webkit-transform-origin: top left; 102 | transform-origin: top left; 103 | } 104 | 105 | /* Shadow */ 106 | .grid .curtain::after { 107 | position: absolute; 108 | top: 0; 109 | left: 0; 110 | width: 100%; 111 | height: 100%; 112 | background: rgba(0,0,0,1); 113 | content: ''; 114 | } 115 | 116 | .grid.swipe-right .curtain::after, 117 | .grid.swipe-rotate .curtain::after { 118 | left: -100%; 119 | } 120 | 121 | .grid.swipe-down .curtain::after { 122 | top: -100%; 123 | } 124 | 125 | /* Title */ 126 | .grid li h3 { 127 | position: absolute; 128 | bottom: 0; 129 | left: 0; 130 | margin: 0; 131 | padding: 20px; 132 | width: 100%; 133 | background: #2E3444; 134 | color: #D3EEE2; 135 | text-align: right; 136 | text-transform: uppercase; 137 | letter-spacing: 1px; 138 | font-weight: 800; 139 | font-size: 1em; 140 | -webkit-transition: -webkit-transform 0.2s, color 0.2s; 141 | transition: transform 0.2s, color 0.2s; 142 | } 143 | 144 | /* Pseudo element for hover effect */ 145 | .grid li > a::before { 146 | position: absolute; 147 | top: 0; 148 | left: 0; 149 | width: 100.5%; 150 | height: 100.5%; 151 | border: 0px solid transparent; 152 | background: rgba(0,0,0,0); 153 | content: ''; 154 | -webkit-transition: border-width 0.2s, border-color 0.2s; 155 | transition: border-width 0.2s, border-color 0.2s; 156 | } 157 | 158 | /* Hover effects */ 159 | .grid li.shown:hover h3 { 160 | color: #fff; 161 | -webkit-transform: translate3d(0,-30px,0); 162 | transform: translate3d(0,-30px,0); 163 | } 164 | 165 | .grid li.shown:hover > a::before { 166 | border-width: 14px; 167 | border-color: #2E3444; 168 | } 169 | 170 | /* Animations */ 171 | 172 | /* Swipe right */ 173 | .grid.swipe-right li.animate .curtain { 174 | -webkit-animation: swipeRight 1.5s cubic-bezier(0.6,0,0.4,1) forwards; 175 | animation: swipeRight 1.5s cubic-bezier(0.6,0,0.4,1) forwards; 176 | } 177 | 178 | @-webkit-keyframes swipeRight { 179 | 0% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */ 180 | 50%, 60% { -webkit-transform: translate3d(0,0,0); } 181 | 100% { -webkit-transform: translate3d(100%,0,0); } 182 | } 183 | 184 | @keyframes swipeRight { 185 | 0% {} 186 | 50%, 60% { -webkit-transform: translate3d(0,0,0); transform: translate(0); } 187 | 100% { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); } 188 | } 189 | 190 | /* Swipe down */ 191 | .grid.swipe-down li.animate .curtain { 192 | -webkit-animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards; 193 | animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards; 194 | } 195 | 196 | @-webkit-keyframes swipeDown { 197 | 0% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */ 198 | 50%, 60% { -webkit-transform: translate3d(0,0,0); } 199 | 100% { -webkit-transform: translate3d(0,100%,0); } 200 | } 201 | 202 | @keyframes swipeDown { 203 | 0% {} 204 | 50%, 60% { -webkit-transform: translate(0); transform: translate(0); } 205 | 100% { transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } 206 | } 207 | 208 | /* Swipe rotate */ 209 | .grid.swipe-rotate li.animate .curtain { 210 | -webkit-animation: swipeRotate 1.5s ease forwards; 211 | animation: swipeRotate 1.5s ease forwards; 212 | } 213 | 214 | @-webkit-keyframes swipeRotate { 215 | 0% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */ 216 | 50%, 60% { -webkit-transform: rotate3d(0,0,1,0deg); } 217 | 100% { -webkit-transform: rotate3d(0,0,1,-90deg); } 218 | } 219 | 220 | @keyframes swipeRotate { 221 | 0% {} 222 | 50%, 60% { -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg); } 223 | 100% { -webkit-transform: rotate3d(0,0,1,-90deg); transform: rotate3d(0,0,1,-90deg); } 224 | } 225 | 226 | /* Shadow */ 227 | .grid li.animate .curtain::after { 228 | -webkit-animation: fadeOut 1.5s ease forwards; 229 | animation: fadeOut 1.5s ease forwards; 230 | -webkit-animation-delay: inherit; 231 | animation-delay: inherit; 232 | } 233 | 234 | @-webkit-keyframes fadeOut { 235 | 0% {} /* fixes Chrome 35.0.1916.114 issue (easing breaks) */ 236 | 50%, 60% { opacity: 1; } 237 | 100% { opacity: 0; } 238 | } 239 | 240 | @keyframes fadeOut { 241 | 0% {} 242 | 50%, 60% { opacity: 1; } 243 | 100% { opacity: 0; } 244 | } 245 | 246 | /* Hide image and title and show at half time */ 247 | .js .grid li img, 248 | .js .grid li h3 { 249 | visibility: hidden; 250 | } 251 | 252 | .grid li.animate img, 253 | .grid li.animate h3 { 254 | -webkit-animation: showMe 1.5s step-end forwards; 255 | animation: showMe 1.5s step-end forwards; 256 | } 257 | 258 | @-webkit-keyframes showMe { 259 | from { visibility: hidden; } 260 | 60%, 100% { visibility: visible; } 261 | } 262 | 263 | @keyframes showMe { 264 | from { visibility: hidden; } 265 | 60%, 100% { visibility: visible; } 266 | } 267 | 268 | .grid li.shown img, 269 | .grid li.shown h3 { 270 | visibility: visible; 271 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Loading and Hover Effect | Demo 1 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | Previous Demo 22 | Back to the Codrops Article 23 |
24 |
25 |

Grid Loading and Hover Effect Recreating Samsung's grid loading effect

26 | 31 |
32 |
33 | 78 |
79 |
80 |

If you enjoyed this demo you might also like:

81 | 82 | 83 |

Animations for Thumbnail Grids

84 | 85 | 86 | 87 |

Grid Loading Effects

88 | 89 |
90 |
91 | 92 | 93 | 94 | 95 | 96 | 101 | 102 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Loading and Hover Effect | Demo 2 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | Previous Demo 22 | Back to the Codrops Article 23 |
24 |
25 |

Grid Loading and Hover Effect Recreating Samsung's grid loading effect

26 | 31 |
32 |
33 | 78 |
79 |
80 |

If you enjoyed this demo you might also like:

81 | 82 | 83 |

Animations for Thumbnail Grids

84 | 85 | 86 | 87 |

Grid Loading Effects

88 | 89 |
90 |
91 | 92 | 93 | 94 | 95 | 96 | 101 | 102 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Loading and Hover Effect | Demo 3 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | Previous Demo 22 | Back to the Codrops Article 23 |
24 |
25 |

Grid Loading and Hover Effect Recreating Samsung's grid loading effect

26 | 31 |
32 |
33 | 78 |
79 |
80 |

If you enjoyed this demo you might also like:

81 | 82 | 83 |

Animations for Thumbnail Grids

84 | 85 | 86 | 87 |

Grid Loading Effects

88 | 89 |
90 |
91 | 92 | 93 | 94 | 95 | 96 | 101 | 102 | -------------------------------------------------------------------------------- /js/gridScrollFx.js: -------------------------------------------------------------------------------- 1 | /** 2 | * gridScrollFx.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( window ) { 12 | 13 | 'use strict'; 14 | 15 | var docElem = window.document.documentElement, 16 | support = { animations : Modernizr.cssanimations }, 17 | animEndEventNames = { 18 | 'WebkitAnimation' : 'webkitAnimationEnd', 19 | 'OAnimation' : 'oAnimationEnd', 20 | 'msAnimation' : 'MSAnimationEnd', 21 | 'animation' : 'animationend' 22 | }, 23 | // animation end event name 24 | animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ]; 25 | 26 | function getViewportH() { 27 | var client = docElem['clientHeight'], 28 | inner = window['innerHeight']; 29 | 30 | if( client < inner ) 31 | return inner; 32 | else 33 | return client; 34 | } 35 | 36 | function scrollY() { 37 | return window.pageYOffset || docElem.scrollTop; 38 | } 39 | 40 | // http://stackoverflow.com/a/5598797/989439 41 | function getOffset( el ) { 42 | var offsetTop = 0, offsetLeft = 0; 43 | do { 44 | if ( !isNaN( el.offsetTop ) ) { 45 | offsetTop += el.offsetTop; 46 | } 47 | if ( !isNaN( el.offsetLeft ) ) { 48 | offsetLeft += el.offsetLeft; 49 | } 50 | } while( el = el.offsetParent ) 51 | 52 | return { 53 | top : offsetTop, 54 | left : offsetLeft 55 | } 56 | } 57 | 58 | function inViewport( el, h ) { 59 | var elH = el.offsetHeight, 60 | scrolled = scrollY(), 61 | viewed = scrolled + getViewportH(), 62 | elTop = getOffset(el).top, 63 | elBottom = elTop + elH, 64 | // if 0, the element is considered in the viewport as soon as it enters. 65 | // if 1, the element is considered in the viewport only when it's fully inside 66 | // value in percentage (1 >= h >= 0) 67 | h = h || 0; 68 | 69 | return (elTop + elH * h) <= viewed && (elBottom - elH * h) >= scrolled; 70 | } 71 | 72 | function extend( a, b ) { 73 | for( var key in b ) { 74 | if( b.hasOwnProperty( key ) ) { 75 | a[key] = b[key]; 76 | } 77 | } 78 | return a; 79 | } 80 | 81 | function GridItem( el ) { 82 | this.el = el; 83 | this.anchor = el.querySelector( 'a' ) 84 | this.image = el.querySelector( 'img' ); 85 | this.desc = el.querySelector( 'h3' ); 86 | } 87 | 88 | GridItem.prototype.addCurtain = function() { 89 | if( !this.image ) return; 90 | this.curtain = document.createElement( 'div' ); 91 | this.curtain.className = 'curtain'; 92 | var rgb = new ColorFinder( function favorHue(r,g,b) { 93 | // exclude white 94 | //if (r>245 && g>245 && b>245) return 0; 95 | return (Math.abs(r-g)*Math.abs(r-g) + Math.abs(r-b)*Math.abs(r-b) + Math.abs(g-b)*Math.abs(g-b))/65535*50+1; 96 | } ).getMostProminentColor( this.image ); 97 | if( rgb.r && rgb.g && rgb.b ) { 98 | this.curtain.style.background = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')'; 99 | } 100 | this.anchor.appendChild( this.curtain ); 101 | } 102 | 103 | GridItem.prototype.changeAnimationDelay = function( time ) { 104 | if( this.curtain ) { 105 | this.curtain.style.WebkitAnimationDelay = time + 'ms'; 106 | this.curtain.style.animationDelay = time + 'ms'; 107 | } 108 | if( this.image ) { 109 | this.image.style.WebkitAnimationDelay = time + 'ms'; 110 | this.image.style.animationDelay = time + 'ms'; 111 | } 112 | if( this.desc ) { 113 | this.desc.style.WebkitAnimationDelay = time + 'ms'; 114 | this.desc.style.animationDelay = time + 'ms'; 115 | } 116 | } 117 | 118 | function GridScrollFx( el, options ) { 119 | this.el = el; 120 | this.options = extend( {}, this.options ); 121 | extend( this.options, options ); 122 | this._init(); 123 | } 124 | 125 | GridScrollFx.prototype.options = { 126 | // Minimum and maximum delay of the animation (random value is chosen) 127 | minDelay : 0, 128 | maxDelay : 500, 129 | // The viewportFactor defines how much of the appearing item has to be visible in order for the animation to start 130 | // if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport. 131 | // If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it) 132 | viewportFactor : 0 133 | } 134 | 135 | GridScrollFx.prototype._init = function() { 136 | var self = this, items = []; 137 | 138 | [].slice.call( this.el.children ).forEach( function( el, i ) { 139 | var item = new GridItem( el ); 140 | items.push( item ); 141 | } ); 142 | 143 | this.items = items; 144 | this.itemsCount = this.items.length; 145 | this.itemsRenderedCount = 0; 146 | this.didScroll = false; 147 | 148 | imagesLoaded( this.el, function() { 149 | // show grid 150 | classie.add( self.el, 'loaded' ); 151 | 152 | // initialize masonry 153 | new Masonry( self.el, { 154 | itemSelector : 'li', 155 | isFitWidth : true, 156 | transitionDuration : 0 157 | } ); 158 | 159 | // the items already shown... 160 | self.items.forEach( function( item ) { 161 | if( inViewport( item.el ) ) { 162 | ++self.itemsRenderedCount; 163 | classie.add( item.el, 'shown' ); 164 | } 165 | else { 166 | item.addCurtain(); 167 | // add random delay 168 | item.changeAnimationDelay( Math.random() * ( self.options.maxDelay - self.options.minDelay ) + self.options.minDelay ); 169 | } 170 | } ); 171 | 172 | var onScrollFn = function() { 173 | if( !self.didScroll ) { 174 | self.didScroll = true; 175 | setTimeout( function() { self._scrollPage(); }, 200 ); 176 | } 177 | 178 | if( self.itemsRenderedCount === self.itemsCount ) { 179 | window.removeEventListener( 'scroll', onScrollFn, false ); 180 | } 181 | } 182 | 183 | // animate the items inside the viewport (on scroll) 184 | window.addEventListener( 'scroll', onScrollFn, false ); 185 | // check if new items are in the viewport after a resize 186 | window.addEventListener( 'resize', function() { self._resizeHandler(); }, false ); 187 | }); 188 | } 189 | 190 | GridScrollFx.prototype._scrollPage = function() { 191 | var self = this; 192 | this.items.forEach( function( item ) { 193 | if( !classie.has( item.el, 'shown' ) && !classie.has( item.el, 'animate' ) && inViewport( item.el, self.options.viewportFactor ) ) { 194 | ++self.itemsRenderedCount; 195 | 196 | if( !item.curtain ) { 197 | classie.add( item.el, 'shown' ); 198 | return; 199 | }; 200 | 201 | classie.add( item.el, 'animate' ); 202 | 203 | // after animation ends add class shown 204 | var onEndAnimationFn = function( ev ) { 205 | if( support.animations ) { 206 | this.removeEventListener( animEndEventName, onEndAnimationFn ); 207 | } 208 | classie.remove( item.el, 'animate' ); 209 | classie.add( item.el, 'shown' ); 210 | }; 211 | 212 | if( support.animations ) { 213 | item.curtain.addEventListener( animEndEventName, onEndAnimationFn ); 214 | } 215 | else { 216 | onEndAnimationFn(); 217 | } 218 | } 219 | }); 220 | this.didScroll = false; 221 | } 222 | 223 | GridScrollFx.prototype._resizeHandler = function() { 224 | var self = this; 225 | function delayed() { 226 | self._scrollPage(); 227 | self.resizeTimeout = null; 228 | } 229 | if ( this.resizeTimeout ) { 230 | clearTimeout( this.resizeTimeout ); 231 | } 232 | this.resizeTimeout = setTimeout( delayed, 1000 ); 233 | } 234 | 235 | // add to global namespace 236 | window.GridScrollFx = GridScrollFx; 237 | 238 | } )( window ); -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.1 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-cssanimations-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.8.1",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.cssanimations=function(){return D("animationName")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function l(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;fh;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(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():f.push(a))}function c(a){var c="readystatechange"===a.type&&"complete"!==e.readyState;if(!b.isReady&&!c){b.isReady=!0;for(var d=0,g=f.length;g>d;d++){var h=f[d];h()}}}function d(d){return d.bind(e,"DOMContentLoaded",c),d.bind(e,"readystatechange",c),d.bind(a,"load",c),b}var e=a.document,f=[];b.isReady=!1,"function"==typeof define&&define.amd?(b.isReady="function"==typeof requirejs,define("doc-ready/doc-ready",["eventie/eventie"],d)):a.docReady=d(a.eventie)}(this),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;be;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(){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 d(a){function d(a){if("string"==typeof a&&(a=document.querySelector(a)),a&&"object"==typeof a&&a.nodeType){var d=f(a);if("none"===d.display)return c();var e={};e.width=a.offsetWidth,e.height=a.offsetHeight;for(var k=e.isBorderBox=!(!j||!d[j]||"border-box"!==d[j]),l=0,m=g.length;m>l;l++){var n=g[l],o=d[n];o=h(a,o);var p=parseFloat(o);e[n]=isNaN(p)?0:p}var q=e.paddingLeft+e.paddingRight,r=e.paddingTop+e.paddingBottom,s=e.marginLeft+e.marginRight,t=e.marginTop+e.marginBottom,u=e.borderLeftWidth+e.borderRightWidth,v=e.borderTopWidth+e.borderBottomWidth,w=k&&i,x=b(d.width);x!==!1&&(e.width=x+(w?0:q+u));var y=b(d.height);return y!==!1&&(e.height=y+(w?0:r+v)),e.innerWidth=e.width-(q+u),e.innerHeight=e.height-(r+v),e.outerWidth=e.width+s,e.outerHeight=e.height+t,e}}function h(a,b){if(e||-1===b.indexOf("%"))return b;var c=a.style,d=c.left,f=a.runtimeStyle,g=f&&f.left;return g&&(f.left=a.currentStyle.left),c.left=b,b=c.pixelLeft,c.left=d,g&&(f.left=g),b}var i,j=a("boxSizing");return function(){if(j){var a=document.createElement("div");a.style.width="200px",a.style.padding="1px 2px 3px 4px",a.style.borderStyle="solid",a.style.borderWidth="1px 2px 3px 4px",a.style[j]="border-box";var c=document.body||document.documentElement;c.appendChild(a);var d=f(a);i=200===b(d.width),c.removeChild(a)}}(),d}var e=a.getComputedStyle,f=e?function(a){return e(a,null)}:function(a){return a.currentStyle},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"],d):"object"==typeof exports?module.exports=d(require("get-style-property")):a.getSize=d(a.getStyleProperty)}(window),function(a,b){function c(a,b){return a[h](b)}function d(a){if(!a.parentNode){var b=document.createDocumentFragment();b.appendChild(a)}}function e(a,b){d(a);for(var c=a.parentNode.querySelectorAll(b),e=0,f=c.length;f>e;e++)if(c[e]===a)return!0;return!1}function f(a,b){return d(a),c(a,b)}var g,h=function(){if(b.matchesSelector)return"matchesSelector";for(var a=["webkit","moz","ms","o"],c=0,d=a.length;d>c;c++){var e=a[c],f=e+"MatchesSelector";if(b[f])return f}}();if(h){var i=document.createElement("div"),j=c(i,"div");g=j?c:f}else g=e;"function"==typeof define&&define.amd?define("matches-selector/matches-selector",[],function(){return g}):window.matchesSelector=g}(this,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):(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(),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="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):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):a.Masonry=b(a.Outlayer,a.getSize)}(window); --------------------------------------------------------------------------------