Repository: desandro/masonry
Branch: master
Commit: 3b0883cf4a4a
Files: 39
Total size: 116.1 KB
Directory structure:
gitextract_fdgpdcv5/
├── .github/
│ ├── contributing.md
│ └── issue_template.md
├── .gitignore
├── .jshintrc
├── README.md
├── bower.json
├── composer.json
├── dist/
│ └── masonry.pkgd.js
├── gulpfile.js
├── masonry.js
├── package.json
├── sandbox/
│ ├── add-items.html
│ ├── basic.html
│ ├── bottom-up.html
│ ├── browserify/
│ │ ├── index.html
│ │ └── main.js
│ ├── element-sizing.html
│ ├── fit-width.html
│ ├── fluid.html
│ ├── horizontal-order.html
│ ├── jquery.html
│ ├── require-js/
│ │ ├── index.html
│ │ └── main.js
│ ├── right-to-left.html
│ ├── sandbox.css
│ └── stamps.html
└── test/
├── .jshintrc
├── helpers.js
├── index.html
├── tests.css
└── unit/
├── basic-layout.js
├── element-sizing.js
├── empty.js
├── fit-width.js
├── gutter.js
├── horizontal-order.js
├── pixel-rounding.js
├── stamp.js
└── zero-column-width.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/contributing.md
================================================
## Submitting issues
### Reduced test case required
All bug reports and problem issues require a [**reduced test case**](http://css-tricks.com/reduced-test-cases/). Create one by forking any one of the [CodePen examples](http://codepen.io/desandro/tag/masonry-docs) from [the docs](http://masonry.desanro.com).
**CodePens**
+ [Basic layout](http://codepen.io/desandro/pen/osFxj)
+ [Fluid layout](http://codepen.io/desandro/pen/JFpeg)
+ [imagesLoaded progress](http://codepen.io/desandro/pen/RPKgEN)
+ [layout method](http://codepen.io/desandro/pen/JdEyYQ)
**Test cases**
+ A reduced test case clearly demonstrates the bug or issue.
+ It contains the bare minimum HTML, CSS, and JavaScript required to demonstrate the bug.
+ A link to your production site is **not** a reduced test case.
Providing a reduced test case is the best way to get your issue addressed. Without a reduced test case, your issue may be closed.
================================================
FILE: .github/issue_template.md
================================================
<!-- Thanks for submitting an issue! All bug reports and problem issues require a **reduced test case**. Create one by forking any one of the CodePen examples from the docs. See guidelines link above. -->
**Test case:** http://codepen.io/desandro/pen/osFxj
================================================
FILE: .gitignore
================================================
components/
bower_components/
node_modules/
sandbox/**/bundle.js
================================================
FILE: .jshintrc
================================================
{
"browser": true,
"devel": false,
"strict": true,
"undef": true,
"unused": true
}
================================================
FILE: README.md
================================================
# Masonry
_Cascading grid layout library_
Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
See [masonry.desandro.com](https://masonry.desandro.com) for complete docs and demos.
## Install
### Download
+ [masonry.pkgd.js](https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js) un-minified, or
+ [masonry.pkgd.min.js](https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js) minified
### CDN
Link directly to Masonry files on [unpkg](https://unpkg.com/).
``` html
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
```
### Package managers
[npm](https://www.npmjs.com/package/masonry-layout): `npm install masonry-layout --save`
Bower: `bower install masonry-layout --save`
## Support Masonry development
Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by [purchasing a license for one of Metafizzy's commercial libraries](https://metafizzy.co).
## Initialize
With jQuery
``` js
$('.grid').masonry({
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
```
With vanilla JavaScript
``` js
// vanilla JS
// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
// init with selector
var msnry = new Masonry( '.grid', {
// options...
});
```
With HTML
Add a `data-masonry` attribute to your element. Options can be set in JSON in the value.
``` html
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
<div class="grid-item"></div>
<div class="grid-item"></div>
...
</div>
```
## License
Masonry is released under the [MIT license](http://desandro.mit-license.org). Have at it.
* * *
Made by David DeSandro
================================================
FILE: bower.json
================================================
{
"name": "masonry-layout",
"description": "Cascading grid layout library",
"main": "masonry.js",
"dependencies": {
"get-size": "^2.0.2",
"outlayer": "^2.1.0"
},
"devDependencies": {
"jquery-bridget": "~2.0.0",
"qunit": "^1.12",
"jquery": ">=1.4.3 <4"
},
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"sandbox/",
"gulpfile.js",
"package.json",
"composer.json"
],
"homepage": "https://masonry.desandro.com",
"authors": [
"David DeSandro"
],
"keywords": [
"masonry",
"layout",
"outlayer"
],
"license": "MIT",
"moduleType": [
"amd",
"globals",
"node"
]
}
================================================
FILE: composer.json
================================================
{
"name": "desandro/masonry",
"description": "Cascading grid layout library",
"type": "component",
"keywords": ["javascript", "library", "grid", "browser", "dom", "layout", "outlayer"],
"homepage": "https://masonry.desandro.com",
"license": "MIT",
"authors": [
{
"name": "David DeSandro",
"homepage": "http://desandro.com/",
"role": "developer"
}
]
}
================================================
FILE: dist/masonry.pkgd.js
================================================
/*!
* Masonry PACKAGED v4.2.2
* Cascading grid layout library
* https://masonry.desandro.com
* MIT License
* by David DeSandro
*/
/**
* Bridget makes jQuery widgets
* v2.0.1
* MIT license
*/
/* jshint browser: true, strict: true, undef: true, unused: true */
( function( window, factory ) {
// universal module definition
/*jshint strict: false */ /* globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'jquery-bridget/jquery-bridget',[ 'jquery' ], function( jQuery ) {
return factory( window, jQuery );
});
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
window,
require('jquery')
);
} else {
// browser global
window.jQueryBridget = factory(
window,
window.jQuery
);
}
}( window, function factory( window, jQuery ) {
'use strict';
// ----- utils ----- //
var arraySlice = Array.prototype.slice;
// helper function for logging errors
// $.error breaks jQuery chaining
var console = window.console;
var logError = typeof console == 'undefined' ? function() {} :
function( message ) {
console.error( message );
};
// ----- jQueryBridget ----- //
function jQueryBridget( namespace, PluginClass, $ ) {
$ = $ || jQuery || window.jQuery;
if ( !$ ) {
return;
}
// add option method -> $().plugin('option', {...})
if ( !PluginClass.prototype.option ) {
// option setter
PluginClass.prototype.option = function( opts ) {
// bail out if not an object
if ( !$.isPlainObject( opts ) ){
return;
}
this.options = $.extend( true, this.options, opts );
};
}
// make jQuery plugin
$.fn[ namespace ] = function( arg0 /*, arg1 */ ) {
if ( typeof arg0 == 'string' ) {
// method call $().plugin( 'methodName', { options } )
// shift arguments by 1
var args = arraySlice.call( arguments, 1 );
return methodCall( this, arg0, args );
}
// just $().plugin({ options })
plainCall( this, arg0 );
return this;
};
// $().plugin('methodName')
function methodCall( $elems, methodName, args ) {
var returnValue;
var pluginMethodStr = '$().' + namespace + '("' + methodName + '")';
$elems.each( function( i, elem ) {
// get instance
var instance = $.data( elem, namespace );
if ( !instance ) {
logError( namespace + ' not initialized. Cannot call methods, i.e. ' +
pluginMethodStr );
return;
}
var method = instance[ methodName ];
if ( !method || methodName.charAt(0) == '_' ) {
logError( pluginMethodStr + ' is not a valid method' );
return;
}
// apply method, get return value
var value = method.apply( instance, args );
// set return value if value is returned, use only first value
returnValue = returnValue === undefined ? value : returnValue;
});
return returnValue !== undefined ? returnValue : $elems;
}
function plainCall( $elems, options ) {
$elems.each( function( i, elem ) {
var instance = $.data( elem, namespace );
if ( instance ) {
// set options & init
instance.option( options );
instance._init();
} else {
// initialize new instance
instance = new PluginClass( elem, options );
$.data( elem, namespace, instance );
}
});
}
updateJQuery( $ );
}
// ----- updateJQuery ----- //
// set $.bridget for v1 backwards compatibility
function updateJQuery( $ ) {
if ( !$ || ( $ && $.bridget ) ) {
return;
}
$.bridget = jQueryBridget;
}
updateJQuery( jQuery || window.jQuery );
// ----- ----- //
return jQueryBridget;
}));
/**
* EvEmitter v1.1.0
* Lil' event emitter
* MIT License
*/
/* jshint unused: true, undef: true, strict: true */
( function( global, factory ) {
// universal module definition
/* jshint strict: false */ /* globals define, module, window */
if ( typeof define == 'function' && define.amd ) {
// AMD - RequireJS
define( 'ev-emitter/ev-emitter',factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS - Browserify, Webpack
module.exports = factory();
} else {
// Browser globals
global.EvEmitter = factory();
}
}( typeof window != 'undefined' ? window : this, function() {
function EvEmitter() {}
var proto = EvEmitter.prototype;
proto.on = function( eventName, listener ) {
if ( !eventName || !listener ) {
return;
}
// set events hash
var events = this._events = this._events || {};
// set listeners array
var listeners = events[ eventName ] = events[ eventName ] || [];
// only add once
if ( listeners.indexOf( listener ) == -1 ) {
listeners.push( listener );
}
return this;
};
proto.once = function( eventName, listener ) {
if ( !eventName || !listener ) {
return;
}
// add event
this.on( eventName, listener );
// set once flag
// set onceEvents hash
var onceEvents = this._onceEvents = this._onceEvents || {};
// set onceListeners object
var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {};
// set flag
onceListeners[ listener ] = true;
return this;
};
proto.off = function( eventName, listener ) {
var listeners = this._events && this._events[ eventName ];
if ( !listeners || !listeners.length ) {
return;
}
var index = listeners.indexOf( listener );
if ( index != -1 ) {
listeners.splice( index, 1 );
}
return this;
};
proto.emitEvent = function( eventName, args ) {
var listeners = this._events && this._events[ eventName ];
if ( !listeners || !listeners.length ) {
return;
}
// copy over to avoid interference if .off() in listener
listeners = listeners.slice(0);
args = args || [];
// once stuff
var onceListeners = this._onceEvents && this._onceEvents[ eventName ];
for ( var i=0; i < listeners.length; i++ ) {
var listener = listeners[i]
var isOnce = onceListeners && onceListeners[ listener ];
if ( isOnce ) {
// remove listener
// remove before trigger to prevent recursion
this.off( eventName, listener );
// unset once flag
delete onceListeners[ listener ];
}
// trigger listener
listener.apply( this, args );
}
return this;
};
proto.allOff = function() {
delete this._events;
delete this._onceEvents;
};
return EvEmitter;
}));
/*!
* getSize v2.0.3
* measure size of elements
* MIT license
*/
/* jshint browser: true, strict: true, undef: true, unused: true */
/* globals console: false */
( function( window, factory ) {
/* jshint strict: false */ /* globals define, module */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'get-size/get-size',factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory();
} else {
// browser global
window.getSize = factory();
}
})( window, function factory() {
'use strict';
// -------------------------- helpers -------------------------- //
// get a number from a string, not a percentage
function getStyleSize( value ) {
var num = parseFloat( value );
// not a percent like '100%', and a number
var isValid = value.indexOf('%') == -1 && !isNaN( num );
return isValid && num;
}
function noop() {}
var logError = typeof console == 'undefined' ? noop :
function( message ) {
console.error( message );
};
// -------------------------- measurements -------------------------- //
var measurements = [
'paddingLeft',
'paddingRight',
'paddingTop',
'paddingBottom',
'marginLeft',
'marginRight',
'marginTop',
'marginBottom',
'borderLeftWidth',
'borderRightWidth',
'borderTopWidth',
'borderBottomWidth'
];
var measurementsLength = measurements.length;
function getZeroSize() {
var size = {
width: 0,
height: 0,
innerWidth: 0,
innerHeight: 0,
outerWidth: 0,
outerHeight: 0
};
for ( var i=0; i < measurementsLength; i++ ) {
var measurement = measurements[i];
size[ measurement ] = 0;
}
return size;
}
// -------------------------- getStyle -------------------------- //
/**
* getStyle, get style of element, check for Firefox bug
* https://bugzilla.mozilla.org/show_bug.cgi?id=548397
*/
function getStyle( elem ) {
var style = getComputedStyle( elem );
if ( !style ) {
logError( 'Style returned ' + style +
'. Are you running this code in a hidden iframe on Firefox? ' +
'See https://bit.ly/getsizebug1' );
}
return style;
}
// -------------------------- setup -------------------------- //
var isSetup = false;
var isBoxSizeOuter;
/**
* setup
* check isBoxSizerOuter
* do on first getSize() rather than on page load for Firefox bug
*/
function setup() {
// setup once
if ( isSetup ) {
return;
}
isSetup = true;
// -------------------------- box sizing -------------------------- //
/**
* Chrome & Safari measure the outer-width on style.width on border-box elems
* IE11 & Firefox<29 measures the inner-width
*/
var div = document.createElement('div');
div.style.width = '200px';
div.style.padding = '1px 2px 3px 4px';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px 2px 3px 4px';
div.style.boxSizing = 'border-box';
var body = document.body || document.documentElement;
body.appendChild( div );
var style = getStyle( div );
// round value for browser zoom. desandro/masonry#928
isBoxSizeOuter = Math.round( getStyleSize( style.width ) ) == 200;
getSize.isBoxSizeOuter = isBoxSizeOuter;
body.removeChild( div );
}
// -------------------------- getSize -------------------------- //
function getSize( elem ) {
setup();
// use querySeletor if elem is string
if ( typeof elem == 'string' ) {
elem = document.querySelector( elem );
}
// do not proceed on non-objects
if ( !elem || typeof elem != 'object' || !elem.nodeType ) {
return;
}
var style = getStyle( elem );
// if hidden, everything is 0
if ( style.display == 'none' ) {
return getZeroSize();
}
var size = {};
size.width = elem.offsetWidth;
size.height = elem.offsetHeight;
var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box';
// get all measurements
for ( var i=0; i < measurementsLength; i++ ) {
var measurement = measurements[i];
var value = style[ measurement ];
var num = parseFloat( value );
// any 'auto', 'medium' value will be 0
size[ measurement ] = !isNaN( num ) ? num : 0;
}
var paddingWidth = size.paddingLeft + size.paddingRight;
var paddingHeight = size.paddingTop + size.paddingBottom;
var marginWidth = size.marginLeft + size.marginRight;
var marginHeight = size.marginTop + size.marginBottom;
var borderWidth = size.borderLeftWidth + size.borderRightWidth;
var borderHeight = size.borderTopWidth + size.borderBottomWidth;
var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter;
// overwrite width and height if we can get it from style
var styleWidth = getStyleSize( style.width );
if ( styleWidth !== false ) {
size.width = styleWidth +
// add padding and border unless it's already including it
( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth );
}
var styleHeight = getStyleSize( style.height );
if ( styleHeight !== false ) {
size.height = styleHeight +
// add padding and border unless it's already including it
( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight );
}
size.innerWidth = size.width - ( paddingWidth + borderWidth );
size.innerHeight = size.height - ( paddingHeight + borderHeight );
size.outerWidth = size.width + marginWidth;
size.outerHeight = size.height + marginHeight;
return size;
}
return getSize;
});
/**
* matchesSelector v2.0.2
* matchesSelector( element, '.selector' )
* MIT license
*/
/*jshint browser: true, strict: true, undef: true, unused: true */
( function( window, factory ) {
/*global define: false, module: false */
'use strict';
// universal module definition
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'desandro-matches-selector/matches-selector',factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory();
} else {
// browser global
window.matchesSelector = factory();
}
}( window, function factory() {
'use strict';
var matchesMethod = ( function() {
var ElemProto = window.Element.prototype;
// check for the standard method name first
if ( ElemProto.matches ) {
return 'matches';
}
// check un-prefixed
if ( ElemProto.matchesSelector ) {
return 'matchesSelector';
}
// check vendor prefixes
var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
for ( var i=0; i < prefixes.length; i++ ) {
var prefix = prefixes[i];
var method = prefix + 'MatchesSelector';
if ( ElemProto[ method ] ) {
return method;
}
}
})();
return function matchesSelector( elem, selector ) {
return elem[ matchesMethod ]( selector );
};
}));
/**
* Fizzy UI utils v2.0.7
* MIT license
*/
/*jshint browser: true, undef: true, unused: true, strict: true */
( function( window, factory ) {
// universal module definition
/*jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( 'fizzy-ui-utils/utils',[
'desandro-matches-selector/matches-selector'
], function( matchesSelector ) {
return factory( window, matchesSelector );
});
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
window,
require('desandro-matches-selector')
);
} else {
// browser global
window.fizzyUIUtils = factory(
window,
window.matchesSelector
);
}
}( window, function factory( window, matchesSelector ) {
var utils = {};
// ----- extend ----- //
// extends objects
utils.extend = function( a, b ) {
for ( var prop in b ) {
a[ prop ] = b[ prop ];
}
return a;
};
// ----- modulo ----- //
utils.modulo = function( num, div ) {
return ( ( num % div ) + div ) % div;
};
// ----- makeArray ----- //
var arraySlice = Array.prototype.slice;
// turn element or nodeList into an array
utils.makeArray = function( obj ) {
if ( Array.isArray( obj ) ) {
// use object if already an array
return obj;
}
// return empty array if undefined or null. #6
if ( obj === null || obj === undefined ) {
return [];
}
var isArrayLike = typeof obj == 'object' && typeof obj.length == 'number';
if ( isArrayLike ) {
// convert nodeList to array
return arraySlice.call( obj );
}
// array of single index
return [ obj ];
};
// ----- removeFrom ----- //
utils.removeFrom = function( ary, obj ) {
var index = ary.indexOf( obj );
if ( index != -1 ) {
ary.splice( index, 1 );
}
};
// ----- getParent ----- //
utils.getParent = function( elem, selector ) {
while ( elem.parentNode && elem != document.body ) {
elem = elem.parentNode;
if ( matchesSelector( elem, selector ) ) {
return elem;
}
}
};
// ----- getQueryElement ----- //
// use element as selector string
utils.getQueryElement = function( elem ) {
if ( typeof elem == 'string' ) {
return document.querySelector( elem );
}
return elem;
};
// ----- handleEvent ----- //
// enable .ontype to trigger from .addEventListener( elem, 'type' )
utils.handleEvent = function( event ) {
var method = 'on' + event.type;
if ( this[ method ] ) {
this[ method ]( event );
}
};
// ----- filterFindElements ----- //
utils.filterFindElements = function( elems, selector ) {
// make array of elems
elems = utils.makeArray( elems );
var ffElems = [];
elems.forEach( function( elem ) {
// check that elem is an actual element
if ( !( elem instanceof HTMLElement ) ) {
return;
}
// add elem if no selector
if ( !selector ) {
ffElems.push( elem );
return;
}
// filter & find items if we have a selector
// filter
if ( matchesSelector( elem, selector ) ) {
ffElems.push( elem );
}
// find children
var childElems = elem.querySelectorAll( selector );
// concat childElems to filterFound array
for ( var i=0; i < childElems.length; i++ ) {
ffElems.push( childElems[i] );
}
});
return ffElems;
};
// ----- debounceMethod ----- //
utils.debounceMethod = function( _class, methodName, threshold ) {
threshold = threshold || 100;
// original method
var method = _class.prototype[ methodName ];
var timeoutName = methodName + 'Timeout';
_class.prototype[ methodName ] = function() {
var timeout = this[ timeoutName ];
clearTimeout( timeout );
var args = arguments;
var _this = this;
this[ timeoutName ] = setTimeout( function() {
method.apply( _this, args );
delete _this[ timeoutName ];
}, threshold );
};
};
// ----- docReady ----- //
utils.docReady = function( callback ) {
var readyState = document.readyState;
if ( readyState == 'complete' || readyState == 'interactive' ) {
// do async to allow for other scripts to run. metafizzy/flickity#441
setTimeout( callback );
} else {
document.addEventListener( 'DOMContentLoaded', callback );
}
};
// ----- htmlInit ----- //
// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/
utils.toDashed = function( str ) {
return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) {
return $1 + '-' + $2;
}).toLowerCase();
};
var console = window.console;
/**
* allow user to initialize classes via [data-namespace] or .js-namespace class
* htmlInit( Widget, 'widgetName' )
* options are parsed from data-namespace-options
*/
utils.htmlInit = function( WidgetClass, namespace ) {
utils.docReady( function() {
var dashedNamespace = utils.toDashed( namespace );
var dataAttr = 'data-' + dashedNamespace;
var dataAttrElems = document.querySelectorAll( '[' + dataAttr + ']' );
var jsDashElems = document.querySelectorAll( '.js-' + dashedNamespace );
var elems = utils.makeArray( dataAttrElems )
.concat( utils.makeArray( jsDashElems ) );
var dataOptionsAttr = dataAttr + '-options';
var jQuery = window.jQuery;
elems.forEach( function( elem ) {
var attr = elem.getAttribute( dataAttr ) ||
elem.getAttribute( dataOptionsAttr );
var options;
try {
options = attr && JSON.parse( attr );
} catch ( error ) {
// log error, do not initialize
if ( console ) {
console.error( 'Error parsing ' + dataAttr + ' on ' + elem.className +
': ' + error );
}
return;
}
// initialize
var instance = new WidgetClass( elem, options );
// make available via $().data('namespace')
if ( jQuery ) {
jQuery.data( elem, namespace, instance );
}
});
});
};
// ----- ----- //
return utils;
}));
/**
* Outlayer Item
*/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /* globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD - RequireJS
define( 'outlayer/item',[
'ev-emitter/ev-emitter',
'get-size/get-size'
],
factory
);
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS - Browserify, Webpack
module.exports = factory(
require('ev-emitter'),
require('get-size')
);
} else {
// browser global
window.Outlayer = {};
window.Outlayer.Item = factory(
window.EvEmitter,
window.getSize
);
}
}( window, function factory( EvEmitter, getSize ) {
'use strict';
// ----- helpers ----- //
function isEmptyObj( obj ) {
for ( var prop in obj ) {
return false;
}
prop = null;
return true;
}
// -------------------------- CSS3 support -------------------------- //
var docElemStyle = document.documentElement.style;
var transitionProperty = typeof docElemStyle.transition == 'string' ?
'transition' : 'WebkitTransition';
var transformProperty = typeof docElemStyle.transform == 'string' ?
'transform' : 'WebkitTransform';
var transitionEndEvent = {
WebkitTransition: 'webkitTransitionEnd',
transition: 'transitionend'
}[ transitionProperty ];
// cache all vendor properties that could have vendor prefix
var vendorProperties = {
transform: transformProperty,
transition: transitionProperty,
transitionDuration: transitionProperty + 'Duration',
transitionProperty: transitionProperty + 'Property',
transitionDelay: transitionProperty + 'Delay'
};
// -------------------------- Item -------------------------- //
function Item( element, layout ) {
if ( !element ) {
return;
}
this.element = element;
// parent layout class, i.e. Masonry, Isotope, or Packery
this.layout = layout;
this.position = {
x: 0,
y: 0
};
this._create();
}
// inherit EvEmitter
var proto = Item.prototype = Object.create( EvEmitter.prototype );
proto.constructor = Item;
proto._create = function() {
// transition objects
this._transn = {
ingProperties: {},
clean: {},
onEnd: {}
};
this.css({
position: 'absolute'
});
};
// trigger specified handler for event type
proto.handleEvent = function( event ) {
var method = 'on' + event.type;
if ( this[ method ] ) {
this[ method ]( event );
}
};
proto.getSize = function() {
this.size = getSize( this.element );
};
/**
* apply CSS styles to element
* @param {Object} style
*/
proto.css = function( style ) {
var elemStyle = this.element.style;
for ( var prop in style ) {
// use vendor property if available
var supportedProp = vendorProperties[ prop ] || prop;
elemStyle[ supportedProp ] = style[ prop ];
}
};
// measure position, and sets it
proto.getPosition = function() {
var style = getComputedStyle( this.element );
var isOriginLeft = this.layout._getOption('originLeft');
var isOriginTop = this.layout._getOption('originTop');
var xValue = style[ isOriginLeft ? 'left' : 'right' ];
var yValue = style[ isOriginTop ? 'top' : 'bottom' ];
var x = parseFloat( xValue );
var y = parseFloat( yValue );
// convert percent to pixels
var layoutSize = this.layout.size;
if ( xValue.indexOf('%') != -1 ) {
x = ( x / 100 ) * layoutSize.width;
}
if ( yValue.indexOf('%') != -1 ) {
y = ( y / 100 ) * layoutSize.height;
}
// clean up 'auto' or other non-integer values
x = isNaN( x ) ? 0 : x;
y = isNaN( y ) ? 0 : y;
// remove padding from measurement
x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight;
y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom;
this.position.x = x;
this.position.y = y;
};
// set settled position, apply padding
proto.layoutPosition = function() {
var layoutSize = this.layout.size;
var style = {};
var isOriginLeft = this.layout._getOption('originLeft');
var isOriginTop = this.layout._getOption('originTop');
// x
var xPadding = isOriginLeft ? 'paddingLeft' : 'paddingRight';
var xProperty = isOriginLeft ? 'left' : 'right';
var xResetProperty = isOriginLeft ? 'right' : 'left';
var x = this.position.x + layoutSize[ xPadding ];
// set in percentage or pixels
style[ xProperty ] = this.getXValue( x );
// reset other property
style[ xResetProperty ] = '';
// y
var yPadding = isOriginTop ? 'paddingTop' : 'paddingBottom';
var yProperty = isOriginTop ? 'top' : 'bottom';
var yResetProperty = isOriginTop ? 'bottom' : 'top';
var y = this.position.y + layoutSize[ yPadding ];
// set in percentage or pixels
style[ yProperty ] = this.getYValue( y );
// reset other property
style[ yResetProperty ] = '';
this.css( style );
this.emitEvent( 'layout', [ this ] );
};
proto.getXValue = function( x ) {
var isHorizontal = this.layout._getOption('horizontal');
return this.layout.options.percentPosition && !isHorizontal ?
( ( x / this.layout.size.width ) * 100 ) + '%' : x + 'px';
};
proto.getYValue = function( y ) {
var isHorizontal = this.layout._getOption('horizontal');
return this.layout.options.percentPosition && isHorizontal ?
( ( y / this.layout.size.height ) * 100 ) + '%' : y + 'px';
};
proto._transitionTo = function( x, y ) {
this.getPosition();
// get current x & y from top/left
var curX = this.position.x;
var curY = this.position.y;
var didNotMove = x == this.position.x && y == this.position.y;
// save end position
this.setPosition( x, y );
// if did not move and not transitioning, just go to layout
if ( didNotMove && !this.isTransitioning ) {
this.layoutPosition();
return;
}
var transX = x - curX;
var transY = y - curY;
var transitionStyle = {};
transitionStyle.transform = this.getTranslate( transX, transY );
this.transition({
to: transitionStyle,
onTransitionEnd: {
transform: this.layoutPosition
},
isCleaning: true
});
};
proto.getTranslate = function( x, y ) {
// flip cooridinates if origin on right or bottom
var isOriginLeft = this.layout._getOption('originLeft');
var isOriginTop = this.layout._getOption('originTop');
x = isOriginLeft ? x : -x;
y = isOriginTop ? y : -y;
return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
};
// non transition + transform support
proto.goTo = function( x, y ) {
this.setPosition( x, y );
this.layoutPosition();
};
proto.moveTo = proto._transitionTo;
proto.setPosition = function( x, y ) {
this.position.x = parseFloat( x );
this.position.y = parseFloat( y );
};
// ----- transition ----- //
/**
* @param {Object} style - CSS
* @param {Function} onTransitionEnd
*/
// non transition, just trigger callback
proto._nonTransition = function( args ) {
this.css( args.to );
if ( args.isCleaning ) {
this._removeStyles( args.to );
}
for ( var prop in args.onTransitionEnd ) {
args.onTransitionEnd[ prop ].call( this );
}
};
/**
* proper transition
* @param {Object} args - arguments
* @param {Object} to - style to transition to
* @param {Object} from - style to start transition from
* @param {Boolean} isCleaning - removes transition styles after transition
* @param {Function} onTransitionEnd - callback
*/
proto.transition = function( args ) {
// redirect to nonTransition if no transition duration
if ( !parseFloat( this.layout.options.transitionDuration ) ) {
this._nonTransition( args );
return;
}
var _transition = this._transn;
// keep track of onTransitionEnd callback by css property
for ( var prop in args.onTransitionEnd ) {
_transition.onEnd[ prop ] = args.onTransitionEnd[ prop ];
}
// keep track of properties that are transitioning
for ( prop in args.to ) {
_transition.ingProperties[ prop ] = true;
// keep track of properties to clean up when transition is done
if ( args.isCleaning ) {
_transition.clean[ prop ] = true;
}
}
// set from styles
if ( args.from ) {
this.css( args.from );
// force redraw. http://blog.alexmaccaw.com/css-transitions
var h = this.element.offsetHeight;
// hack for JSHint to hush about unused var
h = null;
}
// enable transition
this.enableTransition( args.to );
// set styles that are transitioning
this.css( args.to );
this.isTransitioning = true;
};
// dash before all cap letters, including first for
// WebkitTransform => -webkit-transform
function toDashedAll( str ) {
return str.replace( /([A-Z])/g, function( $1 ) {
return '-' + $1.toLowerCase();
});
}
var transitionProps = 'opacity,' + toDashedAll( transformProperty );
proto.enableTransition = function(/* style */) {
// HACK changing transitionProperty during a transition
// will cause transition to jump
if ( this.isTransitioning ) {
return;
}
// make `transition: foo, bar, baz` from style object
// HACK un-comment this when enableTransition can work
// while a transition is happening
// var transitionValues = [];
// for ( var prop in style ) {
// // dash-ify camelCased properties like WebkitTransition
// prop = vendorProperties[ prop ] || prop;
// transitionValues.push( toDashedAll( prop ) );
// }
// munge number to millisecond, to match stagger
var duration = this.layout.options.transitionDuration;
duration = typeof duration == 'number' ? duration + 'ms' : duration;
// enable transition styles
this.css({
transitionProperty: transitionProps,
transitionDuration: duration,
transitionDelay: this.staggerDelay || 0
});
// listen for transition end event
this.element.addEventListener( transitionEndEvent, this, false );
};
// ----- events ----- //
proto.onwebkitTransitionEnd = function( event ) {
this.ontransitionend( event );
};
proto.onotransitionend = function( event ) {
this.ontransitionend( event );
};
// properties that I munge to make my life easier
var dashedVendorProperties = {
'-webkit-transform': 'transform'
};
proto.ontransitionend = function( event ) {
// disregard bubbled events from children
if ( event.target !== this.element ) {
return;
}
var _transition = this._transn;
// get property name of transitioned property, convert to prefix-free
var propertyName = dashedVendorProperties[ event.propertyName ] || event.propertyName;
// remove property that has completed transitioning
delete _transition.ingProperties[ propertyName ];
// check if any properties are still transitioning
if ( isEmptyObj( _transition.ingProperties ) ) {
// all properties have completed transitioning
this.disableTransition();
}
// clean style
if ( propertyName in _transition.clean ) {
// clean up style
this.element.style[ event.propertyName ] = '';
delete _transition.clean[ propertyName ];
}
// trigger onTransitionEnd callback
if ( propertyName in _transition.onEnd ) {
var onTransitionEnd = _transition.onEnd[ propertyName ];
onTransitionEnd.call( this );
delete _transition.onEnd[ propertyName ];
}
this.emitEvent( 'transitionEnd', [ this ] );
};
proto.disableTransition = function() {
this.removeTransitionStyles();
this.element.removeEventListener( transitionEndEvent, this, false );
this.isTransitioning = false;
};
/**
* removes style property from element
* @param {Object} style
**/
proto._removeStyles = function( style ) {
// clean up transition styles
var cleanStyle = {};
for ( var prop in style ) {
cleanStyle[ prop ] = '';
}
this.css( cleanStyle );
};
var cleanTransitionStyle = {
transitionProperty: '',
transitionDuration: '',
transitionDelay: ''
};
proto.removeTransitionStyles = function() {
// remove transition
this.css( cleanTransitionStyle );
};
// ----- stagger ----- //
proto.stagger = function( delay ) {
delay = isNaN( delay ) ? 0 : delay;
this.staggerDelay = delay + 'ms';
};
// ----- show/hide/remove ----- //
// remove element from DOM
proto.removeElem = function() {
this.element.parentNode.removeChild( this.element );
// remove display: none
this.css({ display: '' });
this.emitEvent( 'remove', [ this ] );
};
proto.remove = function() {
// just remove element if no transition support or no transition
if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) {
this.removeElem();
return;
}
// start transition
this.once( 'transitionEnd', function() {
this.removeElem();
});
this.hide();
};
proto.reveal = function() {
delete this.isHidden;
// remove display: none
this.css({ display: '' });
var options = this.layout.options;
var onTransitionEnd = {};
var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle');
onTransitionEnd[ transitionEndProperty ] = this.onRevealTransitionEnd;
this.transition({
from: options.hiddenStyle,
to: options.visibleStyle,
isCleaning: true,
onTransitionEnd: onTransitionEnd
});
};
proto.onRevealTransitionEnd = function() {
// check if still visible
// during transition, item may have been hidden
if ( !this.isHidden ) {
this.emitEvent('reveal');
}
};
/**
* get style property use for hide/reveal transition end
* @param {String} styleProperty - hiddenStyle/visibleStyle
* @returns {String}
*/
proto.getHideRevealTransitionEndProperty = function( styleProperty ) {
var optionStyle = this.layout.options[ styleProperty ];
// use opacity
if ( optionStyle.opacity ) {
return 'opacity';
}
// get first property
for ( var prop in optionStyle ) {
return prop;
}
};
proto.hide = function() {
// set flag
this.isHidden = true;
// remove display: none
this.css({ display: '' });
var options = this.layout.options;
var onTransitionEnd = {};
var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle');
onTransitionEnd[ transitionEndProperty ] = this.onHideTransitionEnd;
this.transition({
from: options.visibleStyle,
to: options.hiddenStyle,
// keep hidden stuff hidden
isCleaning: true,
onTransitionEnd: onTransitionEnd
});
};
proto.onHideTransitionEnd = function() {
// check if still hidden
// during transition, item may have been un-hidden
if ( this.isHidden ) {
this.css({ display: 'none' });
this.emitEvent('hide');
}
};
proto.destroy = function() {
this.css({
position: '',
left: '',
right: '',
top: '',
bottom: '',
transition: '',
transform: ''
});
};
return Item;
}));
/*!
* Outlayer v2.1.1
* the brains and guts of a layout library
* MIT license
*/
( function( window, factory ) {
'use strict';
// universal module definition
/* jshint strict: false */ /* globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD - RequireJS
define( 'outlayer/outlayer',[
'ev-emitter/ev-emitter',
'get-size/get-size',
'fizzy-ui-utils/utils',
'./item'
],
function( EvEmitter, getSize, utils, Item ) {
return factory( window, EvEmitter, getSize, utils, Item);
}
);
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS - Browserify, Webpack
module.exports = factory(
window,
require('ev-emitter'),
require('get-size'),
require('fizzy-ui-utils'),
require('./item')
);
} else {
// browser global
window.Outlayer = factory(
window,
window.EvEmitter,
window.getSize,
window.fizzyUIUtils,
window.Outlayer.Item
);
}
}( window, function factory( window, EvEmitter, getSize, utils, Item ) {
'use strict';
// ----- vars ----- //
var console = window.console;
var jQuery = window.jQuery;
var noop = function() {};
// -------------------------- Outlayer -------------------------- //
// globally unique identifiers
var GUID = 0;
// internal store of all Outlayer intances
var instances = {};
/**
* @param {Element, String} element
* @param {Object} options
* @constructor
*/
function Outlayer( element, options ) {
var queryElement = utils.getQueryElement( element );
if ( !queryElement ) {
if ( console ) {
console.error( 'Bad element for ' + this.constructor.namespace +
': ' + ( queryElement || element ) );
}
return;
}
this.element = queryElement;
// add jQuery
if ( jQuery ) {
this.$element = jQuery( this.element );
}
// options
this.options = utils.extend( {}, this.constructor.defaults );
this.option( options );
// add id for Outlayer.getFromElement
var id = ++GUID;
this.element.outlayerGUID = id; // expando
instances[ id ] = this; // associate via id
// kick it off
this._create();
var isInitLayout = this._getOption('initLayout');
if ( isInitLayout ) {
this.layout();
}
}
// settings are for internal use only
Outlayer.namespace = 'outlayer';
Outlayer.Item = Item;
// default options
Outlayer.defaults = {
containerStyle: {
position: 'relative'
},
initLayout: true,
originLeft: true,
originTop: true,
resize: true,
resizeContainer: true,
// item options
transitionDuration: '0.4s',
hiddenStyle: {
opacity: 0,
transform: 'scale(0.001)'
},
visibleStyle: {
opacity: 1,
transform: 'scale(1)'
}
};
var proto = Outlayer.prototype;
// inherit EvEmitter
utils.extend( proto, EvEmitter.prototype );
/**
* set options
* @param {Object} opts
*/
proto.option = function( opts ) {
utils.extend( this.options, opts );
};
/**
* get backwards compatible option value, check old name
*/
proto._getOption = function( option ) {
var oldOption = this.constructor.compatOptions[ option ];
return oldOption && this.options[ oldOption ] !== undefined ?
this.options[ oldOption ] : this.options[ option ];
};
Outlayer.compatOptions = {
// currentName: oldName
initLayout: 'isInitLayout',
horizontal: 'isHorizontal',
layoutInstant: 'isLayoutInstant',
originLeft: 'isOriginLeft',
originTop: 'isOriginTop',
resize: 'isResizeBound',
resizeContainer: 'isResizingContainer'
};
proto._create = function() {
// get items from children
this.reloadItems();
// elements that affect layout, but are not laid out
this.stamps = [];
this.stamp( this.options.stamp );
// set container style
utils.extend( this.element.style, this.options.containerStyle );
// bind resize method
var canBindResize = this._getOption('resize');
if ( canBindResize ) {
this.bindResize();
}
};
// goes through all children again and gets bricks in proper order
proto.reloadItems = function() {
// collection of item elements
this.items = this._itemize( this.element.children );
};
/**
* turn elements into Outlayer.Items to be used in layout
* @param {Array or NodeList or HTMLElement} elems
* @returns {Array} items - collection of new Outlayer Items
*/
proto._itemize = function( elems ) {
var itemElems = this._filterFindItemElements( elems );
var Item = this.constructor.Item;
// create new Outlayer Items for collection
var items = [];
for ( var i=0; i < itemElems.length; i++ ) {
var elem = itemElems[i];
var item = new Item( elem, this );
items.push( item );
}
return items;
};
/**
* get item elements to be used in layout
* @param {Array or NodeList or HTMLElement} elems
* @returns {Array} items - item elements
*/
proto._filterFindItemElements = function( elems ) {
return utils.filterFindElements( elems, this.options.itemSelector );
};
/**
* getter method for getting item elements
* @returns {Array} elems - collection of item elements
*/
proto.getItemElements = function() {
return this.items.map( function( item ) {
return item.element;
});
};
// ----- init & layout ----- //
/**
* lays out all items
*/
proto.layout = function() {
this._resetLayout();
this._manageStamps();
// don't animate first layout
var layoutInstant = this._getOption('layoutInstant');
var isInstant = layoutInstant !== undefined ?
layoutInstant : !this._isLayoutInited;
this.layoutItems( this.items, isInstant );
// flag for initalized
this._isLayoutInited = true;
};
// _init is alias for layout
proto._init = proto.layout;
/**
* logic before any new layout
*/
proto._resetLayout = function() {
this.getSize();
};
proto.getSize = function() {
this.size = getSize( this.element );
};
/**
* get measurement from option, for columnWidth, rowHeight, gutter
* if option is String -> get element from selector string, & get size of element
* if option is Element -> get size of element
* else use option as a number
*
* @param {String} measurement
* @param {String} size - width or height
* @private
*/
proto._getMeasurement = function( measurement, size ) {
var option = this.options[ measurement ];
var elem;
if ( !option ) {
// default to 0
this[ measurement ] = 0;
} else {
// use option as an element
if ( typeof option == 'string' ) {
elem = this.element.querySelector( option );
} else if ( option instanceof HTMLElement ) {
elem = option;
}
// use size of element, if element
this[ measurement ] = elem ? getSize( elem )[ size ] : option;
}
};
/**
* layout a collection of item elements
* @api public
*/
proto.layoutItems = function( items, isInstant ) {
items = this._getItemsForLayout( items );
this._layoutItems( items, isInstant );
this._postLayout();
};
/**
* get the items to be laid out
* you may want to skip over some items
* @param {Array} items
* @returns {Array} items
*/
proto._getItemsForLayout = function( items ) {
return items.filter( function( item ) {
return !item.isIgnored;
});
};
/**
* layout items
* @param {Array} items
* @param {Boolean} isInstant
*/
proto._layoutItems = function( items, isInstant ) {
this._emitCompleteOnItems( 'layout', items );
if ( !items || !items.length ) {
// no items, emit event with empty array
return;
}
var queue = [];
items.forEach( function( item ) {
// get x/y object from method
var position = this._getItemLayoutPosition( item );
// enqueue
position.item = item;
position.isInstant = isInstant || item.isLayoutInstant;
queue.push( position );
}, this );
this._processLayoutQueue( queue );
};
/**
* get item layout position
* @param {Outlayer.Item} item
* @returns {Object} x and y position
*/
proto._getItemLayoutPosition = function( /* item */ ) {
return {
x: 0,
y: 0
};
};
/**
* iterate over array and position each item
* Reason being - separating this logic prevents 'layout invalidation'
* thx @paul_irish
* @param {Array} queue
*/
proto._processLayoutQueue = function( queue ) {
this.updateStagger();
queue.forEach( function( obj, i ) {
this._positionItem( obj.item, obj.x, obj.y, obj.isInstant, i );
}, this );
};
// set stagger from option in milliseconds number
proto.updateStagger = function() {
var stagger = this.options.stagger;
if ( stagger === null || stagger === undefined ) {
this.stagger = 0;
return;
}
this.stagger = getMilliseconds( stagger );
return this.stagger;
};
/**
* Sets position of item in DOM
* @param {Outlayer.Item} item
* @param {Number} x - horizontal position
* @param {Number} y - vertical position
* @param {Boolean} isInstant - disables transitions
*/
proto._positionItem = function( item, x, y, isInstant, i ) {
if ( isInstant ) {
// if not transition, just set CSS
item.goTo( x, y );
} else {
item.stagger( i * this.stagger );
item.moveTo( x, y );
}
};
/**
* Any logic you want to do after each layout,
* i.e. size the container
*/
proto._postLayout = function() {
this.resizeContainer();
};
proto.resizeContainer = function() {
var isResizingContainer = this._getOption('resizeContainer');
if ( !isResizingContainer ) {
return;
}
var size = this._getContainerSize();
if ( size ) {
this._setContainerMeasure( size.width, true );
this._setContainerMeasure( size.height, false );
}
};
/**
* Sets width or height of container if returned
* @returns {Object} size
* @param {Number} width
* @param {Number} height
*/
proto._getContainerSize = noop;
/**
* @param {Number} measure - size of width or height
* @param {Boolean} isWidth
*/
proto._setContainerMeasure = function( measure, isWidth ) {
if ( measure === undefined ) {
return;
}
var elemSize = this.size;
// add padding and border width if border box
if ( elemSize.isBorderBox ) {
measure += isWidth ? elemSize.paddingLeft + elemSize.paddingRight +
elemSize.borderLeftWidth + elemSize.borderRightWidth :
elemSize.paddingBottom + elemSize.paddingTop +
elemSize.borderTopWidth + elemSize.borderBottomWidth;
}
measure = Math.max( measure, 0 );
this.element.style[ isWidth ? 'width' : 'height' ] = measure + 'px';
};
/**
* emit eventComplete on a collection of items events
* @param {String} eventName
* @param {Array} items - Outlayer.Items
*/
proto._emitCompleteOnItems = function( eventName, items ) {
var _this = this;
function onComplete() {
_this.dispatchEvent( eventName + 'Complete', null, [ items ] );
}
var count = items.length;
if ( !items || !count ) {
onComplete();
return;
}
var doneCount = 0;
function tick() {
doneCount++;
if ( doneCount == count ) {
onComplete();
}
}
// bind callback
items.forEach( function( item ) {
item.once( eventName, tick );
});
};
/**
* emits events via EvEmitter and jQuery events
* @param {String} type - name of event
* @param {Event} event - original event
* @param {Array} args - extra arguments
*/
proto.dispatchEvent = function( type, event, args ) {
// add original event to arguments
var emitArgs = event ? [ event ].concat( args ) : args;
this.emitEvent( type, emitArgs );
if ( jQuery ) {
// set this.$element
this.$element = this.$element || jQuery( this.element );
if ( event ) {
// create jQuery event
var $event = jQuery.Event( event );
$event.type = type;
this.$element.trigger( $event, args );
} else {
// just trigger with type if no event available
this.$element.trigger( type, args );
}
}
};
// -------------------------- ignore & stamps -------------------------- //
/**
* keep item in collection, but do not lay it out
* ignored items do not get skipped in layout
* @param {Element} elem
*/
proto.ignore = function( elem ) {
var item = this.getItem( elem );
if ( item ) {
item.isIgnored = true;
}
};
/**
* return item to layout collection
* @param {Element} elem
*/
proto.unignore = function( elem ) {
var item = this.getItem( elem );
if ( item ) {
delete item.isIgnored;
}
};
/**
* adds elements to stamps
* @param {NodeList, Array, Element, or String} elems
*/
proto.stamp = function( elems ) {
elems = this._find( elems );
if ( !elems ) {
return;
}
this.stamps = this.stamps.concat( elems );
// ignore
elems.forEach( this.ignore, this );
};
/**
* removes elements to stamps
* @param {NodeList, Array, or Element} elems
*/
proto.unstamp = function( elems ) {
elems = this._find( elems );
if ( !elems ){
return;
}
elems.forEach( function( elem ) {
// filter out removed stamp elements
utils.removeFrom( this.stamps, elem );
this.unignore( elem );
}, this );
};
/**
* finds child elements
* @param {NodeList, Array, Element, or String} elems
* @returns {Array} elems
*/
proto._find = function( elems ) {
if ( !elems ) {
return;
}
// if string, use argument as selector string
if ( typeof elems == 'string' ) {
elems = this.element.querySelectorAll( elems );
}
elems = utils.makeArray( elems );
return elems;
};
proto._manageStamps = function() {
if ( !this.stamps || !this.stamps.length ) {
return;
}
this._getBoundingRect();
this.stamps.forEach( this._manageStamp, this );
};
// update boundingLeft / Top
proto._getBoundingRect = function() {
// get bounding rect for container element
var boundingRect = this.element.getBoundingClientRect();
var size = this.size;
this._boundingRect = {
left: boundingRect.left + size.paddingLeft + size.borderLeftWidth,
top: boundingRect.top + size.paddingTop + size.borderTopWidth,
right: boundingRect.right - ( size.paddingRight + size.borderRightWidth ),
bottom: boundingRect.bottom - ( size.paddingBottom + size.borderBottomWidth )
};
};
/**
* @param {Element} stamp
**/
proto._manageStamp = noop;
/**
* get x/y position of element relative to container element
* @param {Element} elem
* @returns {Object} offset - has left, top, right, bottom
*/
proto._getElementOffset = function( elem ) {
var boundingRect = elem.getBoundingClientRect();
var thisRect = this._boundingRect;
var size = getSize( elem );
var offset = {
left: boundingRect.left - thisRect.left - size.marginLeft,
top: boundingRect.top - thisRect.top - size.marginTop,
right: thisRect.right - boundingRect.right - size.marginRight,
bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom
};
return offset;
};
// -------------------------- resize -------------------------- //
// enable event handlers for listeners
// i.e. resize -> onresize
proto.handleEvent = utils.handleEvent;
/**
* Bind layout to window resizing
*/
proto.bindResize = function() {
window.addEventListener( 'resize', this );
this.isResizeBound = true;
};
/**
* Unbind layout to window resizing
*/
proto.unbindResize = function() {
window.removeEventListener( 'resize', this );
this.isResizeBound = false;
};
proto.onresize = function() {
this.resize();
};
utils.debounceMethod( Outlayer, 'onresize', 100 );
proto.resize = function() {
// don't trigger if size did not change
// or if resize was unbound. See #9
if ( !this.isResizeBound || !this.needsResizeLayout() ) {
return;
}
this.layout();
};
/**
* check if layout is needed post layout
* @returns Boolean
*/
proto.needsResizeLayout = function() {
var size = getSize( this.element );
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var hasSizes = this.size && size;
return hasSizes && size.innerWidth !== this.size.innerWidth;
};
// -------------------------- methods -------------------------- //
/**
* add items to Outlayer instance
* @param {Array or NodeList or Element} elems
* @returns {Array} items - Outlayer.Items
**/
proto.addItems = function( elems ) {
var items = this._itemize( elems );
// add items to collection
if ( items.length ) {
this.items = this.items.concat( items );
}
return items;
};
/**
* Layout newly-appended item elements
* @param {Array or NodeList or Element} elems
*/
proto.appended = function( elems ) {
var items = this.addItems( elems );
if ( !items.length ) {
return;
}
// layout and reveal just the new items
this.layoutItems( items, true );
this.reveal( items );
};
/**
* Layout prepended elements
* @param {Array or NodeList or Element} elems
*/
proto.prepended = function( elems ) {
var items = this._itemize( elems );
if ( !items.length ) {
return;
}
// add items to beginning of collection
var previousItems = this.items.slice(0);
this.items = items.concat( previousItems );
// start new layout
this._resetLayout();
this._manageStamps();
// layout new stuff without transition
this.layoutItems( items, true );
this.reveal( items );
// layout previous items
this.layoutItems( previousItems );
};
/**
* reveal a collection of items
* @param {Array of Outlayer.Items} items
*/
proto.reveal = function( items ) {
this._emitCompleteOnItems( 'reveal', items );
if ( !items || !items.length ) {
return;
}
var stagger = this.updateStagger();
items.forEach( function( item, i ) {
item.stagger( i * stagger );
item.reveal();
});
};
/**
* hide a collection of items
* @param {Array of Outlayer.Items} items
*/
proto.hide = function( items ) {
this._emitCompleteOnItems( 'hide', items );
if ( !items || !items.length ) {
return;
}
var stagger = this.updateStagger();
items.forEach( function( item, i ) {
item.stagger( i * stagger );
item.hide();
});
};
/**
* reveal item elements
* @param {Array}, {Element}, {NodeList} items
*/
proto.revealItemElements = function( elems ) {
var items = this.getItems( elems );
this.reveal( items );
};
/**
* hide item elements
* @param {Array}, {Element}, {NodeList} items
*/
proto.hideItemElements = function( elems ) {
var items = this.getItems( elems );
this.hide( items );
};
/**
* get Outlayer.Item, given an Element
* @param {Element} elem
* @param {Function} callback
* @returns {Outlayer.Item} item
*/
proto.getItem = function( elem ) {
// loop through items to get the one that matches
for ( var i=0; i < this.items.length; i++ ) {
var item = this.items[i];
if ( item.element == elem ) {
// return item
return item;
}
}
};
/**
* get collection of Outlayer.Items, given Elements
* @param {Array} elems
* @returns {Array} items - Outlayer.Items
*/
proto.getItems = function( elems ) {
elems = utils.makeArray( elems );
var items = [];
elems.forEach( function( elem ) {
var item = this.getItem( elem );
if ( item ) {
items.push( item );
}
}, this );
return items;
};
/**
* remove element(s) from instance and DOM
* @param {Array or NodeList or Element} elems
*/
proto.remove = function( elems ) {
var removeItems = this.getItems( elems );
this._emitCompleteOnItems( 'remove', removeItems );
// bail if no items to remove
if ( !removeItems || !removeItems.length ) {
return;
}
removeItems.forEach( function( item ) {
item.remove();
// remove item from collection
utils.removeFrom( this.items, item );
}, this );
};
// ----- destroy ----- //
// remove and disable Outlayer instance
proto.destroy = function() {
// clean up dynamic styles
var style = this.element.style;
style.height = '';
style.position = '';
style.width = '';
// destroy items
this.items.forEach( function( item ) {
item.destroy();
});
this.unbindResize();
var id = this.element.outlayerGUID;
delete instances[ id ]; // remove reference to instance by id
delete this.element.outlayerGUID;
// remove data for jQuery
if ( jQuery ) {
jQuery.removeData( this.element, this.constructor.namespace );
}
};
// -------------------------- data -------------------------- //
/**
* get Outlayer instance from element
* @param {Element} elem
* @returns {Outlayer}
*/
Outlayer.data = function( elem ) {
elem = utils.getQueryElement( elem );
var id = elem && elem.outlayerGUID;
return id && instances[ id ];
};
// -------------------------- create Outlayer class -------------------------- //
/**
* create a layout class
* @param {String} namespace
*/
Outlayer.create = function( namespace, options ) {
// sub-class Outlayer
var Layout = subclass( Outlayer );
// apply new options and compatOptions
Layout.defaults = utils.extend( {}, Outlayer.defaults );
utils.extend( Layout.defaults, options );
Layout.compatOptions = utils.extend( {}, Outlayer.compatOptions );
Layout.namespace = namespace;
Layout.data = Outlayer.data;
// sub-class Item
Layout.Item = subclass( Item );
// -------------------------- declarative -------------------------- //
utils.htmlInit( Layout, namespace );
// -------------------------- jQuery bridge -------------------------- //
// make into jQuery plugin
if ( jQuery && jQuery.bridget ) {
jQuery.bridget( namespace, Layout );
}
return Layout;
};
function subclass( Parent ) {
function SubClass() {
Parent.apply( this, arguments );
}
SubClass.prototype = Object.create( Parent.prototype );
SubClass.prototype.constructor = SubClass;
return SubClass;
}
// ----- helpers ----- //
// how many milliseconds are in each unit
var msUnits = {
ms: 1,
s: 1000
};
// munge time-like parameter into millisecond number
// '0.4s' -> 40
function getMilliseconds( time ) {
if ( typeof time == 'number' ) {
return time;
}
var matches = time.match( /(^\d*\.?\d*)(\w*)/ );
var num = matches && matches[1];
var unit = matches && matches[2];
if ( !num.length ) {
return 0;
}
num = parseFloat( num );
var mult = msUnits[ unit ] || 1;
return num * mult;
}
// ----- fin ----- //
// back in global
Outlayer.Item = Item;
return Outlayer;
}));
/*!
* Masonry v4.2.2
* Cascading grid layout library
* https://masonry.desandro.com
* MIT License
* by David DeSandro
*/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( [
'outlayer/outlayer',
'get-size/get-size'
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('outlayer'),
require('get-size')
);
} else {
// browser global
window.Masonry = factory(
window.Outlayer,
window.getSize
);
}
}( window, function factory( Outlayer, getSize ) {
// -------------------------- masonryDefinition -------------------------- //
// create an Outlayer layout class
var Masonry = Outlayer.create('masonry');
// isFitWidth -> fitWidth
Masonry.compatOptions.fitWidth = 'isFitWidth';
var proto = Masonry.prototype;
proto._resetLayout = function() {
this.getSize();
this._getMeasurement( 'columnWidth', 'outerWidth' );
this._getMeasurement( 'gutter', 'outerWidth' );
this.measureColumns();
// reset column Y
this.colYs = [];
for ( var i=0; i < this.cols; i++ ) {
this.colYs.push( 0 );
}
this.maxY = 0;
this.horizontalColIndex = 0;
};
proto.measureColumns = function() {
this.getContainerWidth();
// if columnWidth is 0, default to outerWidth of first item
if ( !this.columnWidth ) {
var firstItem = this.items[0];
var firstItemElem = firstItem && firstItem.element;
// columnWidth fall back to item of first element
this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
// if first elem has no width, default to size of container
this.containerWidth;
}
var columnWidth = this.columnWidth += this.gutter;
// calculate columns
var containerWidth = this.containerWidth + this.gutter;
var cols = containerWidth / columnWidth;
// fix rounding errors, typically with gutters
var excess = columnWidth - containerWidth % columnWidth;
// if overshoot is less than a pixel, round up, otherwise floor it
var mathMethod = excess && excess < 1 ? 'round' : 'floor';
cols = Math[ mathMethod ]( cols );
this.cols = Math.max( cols, 1 );
};
proto.getContainerWidth = function() {
// container is parent if fit width
var isFitWidth = this._getOption('fitWidth');
var container = isFitWidth ? this.element.parentNode : this.element;
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var size = getSize( container );
this.containerWidth = size && size.innerWidth;
};
proto._getItemLayoutPosition = function( item ) {
item.getSize();
// how many columns does this brick span
var remainder = item.size.outerWidth % this.columnWidth;
var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
// round if off by 1 pixel, otherwise use ceil
var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
colSpan = Math.min( colSpan, this.cols );
// use horizontal or top column position
var colPosMethod = this.options.horizontalOrder ?
'_getHorizontalColPosition' : '_getTopColPosition';
var colPosition = this[ colPosMethod ]( colSpan, item );
// position the brick
var position = {
x: this.columnWidth * colPosition.col,
y: colPosition.y
};
// apply setHeight to necessary columns
var setHeight = colPosition.y + item.size.outerHeight;
var setMax = colSpan + colPosition.col;
for ( var i = colPosition.col; i < setMax; i++ ) {
this.colYs[i] = setHeight;
}
return position;
};
proto._getTopColPosition = function( colSpan ) {
var colGroup = this._getTopColGroup( colSpan );
// get the minimum Y value from the columns
var minimumY = Math.min.apply( Math, colGroup );
return {
col: colGroup.indexOf( minimumY ),
y: minimumY,
};
};
/**
* @param {Number} colSpan - number of columns the element spans
* @returns {Array} colGroup
*/
proto._getTopColGroup = function( colSpan ) {
if ( colSpan < 2 ) {
// if brick spans only one column, use all the column Ys
return this.colYs;
}
var colGroup = [];
// how many different places could this brick fit horizontally
var groupCount = this.cols + 1 - colSpan;
// for each group potential horizontal position
for ( var i = 0; i < groupCount; i++ ) {
colGroup[i] = this._getColGroupY( i, colSpan );
}
return colGroup;
};
proto._getColGroupY = function( col, colSpan ) {
if ( colSpan < 2 ) {
return this.colYs[ col ];
}
// make an array of colY values for that one group
var groupColYs = this.colYs.slice( col, col + colSpan );
// and get the max value of the array
return Math.max.apply( Math, groupColYs );
};
// get column position based on horizontal index. #873
proto._getHorizontalColPosition = function( colSpan, item ) {
var col = this.horizontalColIndex % this.cols;
var isOver = colSpan > 1 && col + colSpan > this.cols;
// shift to next row if item can't fit on current row
col = isOver ? 0 : col;
// don't let zero-size items take up space
var hasSize = item.size.outerWidth && item.size.outerHeight;
this.horizontalColIndex = hasSize ? col + colSpan : this.horizontalColIndex;
return {
col: col,
y: this._getColGroupY( col, colSpan ),
};
};
proto._manageStamp = function( stamp ) {
var stampSize = getSize( stamp );
var offset = this._getElementOffset( stamp );
// get the columns that this stamp affects
var isOriginLeft = this._getOption('originLeft');
var firstX = isOriginLeft ? offset.left : offset.right;
var lastX = firstX + stampSize.outerWidth;
var firstCol = Math.floor( firstX / this.columnWidth );
firstCol = Math.max( 0, firstCol );
var lastCol = Math.floor( lastX / this.columnWidth );
// lastCol should not go over if multiple of columnWidth #425
lastCol -= lastX % this.columnWidth ? 0 : 1;
lastCol = Math.min( this.cols - 1, lastCol );
// set colYs to bottom of the stamp
var isOriginTop = this._getOption('originTop');
var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) +
stampSize.outerHeight;
for ( var i = firstCol; i <= lastCol; i++ ) {
this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
}
};
proto._getContainerSize = function() {
this.maxY = Math.max.apply( Math, this.colYs );
var size = {
height: this.maxY
};
if ( this._getOption('fitWidth') ) {
size.width = this._getContainerFitWidth();
}
return size;
};
proto._getContainerFitWidth = function() {
var unusedCols = 0;
// count unused columns
var i = this.cols;
while ( --i ) {
if ( this.colYs[i] !== 0 ) {
break;
}
unusedCols++;
}
// fit container to columns that have been used
return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
};
proto.needsResizeLayout = function() {
var previousWidth = this.containerWidth;
this.getContainerWidth();
return previousWidth != this.containerWidth;
};
return Masonry;
}));
================================================
FILE: gulpfile.js
================================================
/*jshint node: true, strict: false */
var fs = require('fs');
var gulp = require('gulp');
var rename = require('gulp-rename');
var replace = require('gulp-replace');
// ----- hint ----- //
var jshint = require('gulp-jshint');
gulp.task( 'hint-js', function() {
return gulp.src('masonry.js')
.pipe( jshint() )
.pipe( jshint.reporter('default') );
});
gulp.task( 'hint-test', function() {
return gulp.src('test/unit/*.js')
.pipe( jshint() )
.pipe( jshint.reporter('default') );
});
gulp.task( 'hint-task', function() {
return gulp.src('gulpfile.js')
.pipe( jshint() )
.pipe( jshint.reporter('default') );
});
var jsonlint = require('gulp-json-lint');
gulp.task( 'jsonlint', function() {
return gulp.src( '*.json' )
.pipe( jsonlint() )
.pipe( jsonlint.report('verbose') );
});
gulp.task( 'hint', [ 'hint-js', 'hint-test', 'hint-task', 'jsonlint' ]);
// -------------------------- RequireJS makes pkgd -------------------------- //
// regex for banner comment
var reBannerComment = new RegExp('^\\s*(?:\\/\\*[\\s\\S]*?\\*\\/)\\s*');
function getBanner() {
var src = fs.readFileSync( 'masonry.js', 'utf8' );
var matches = src.match( reBannerComment );
var banner = matches[0].replace( 'Masonry', 'Masonry PACKAGED' );
return banner;
}
function addBanner( str ) {
return replace( /^/, str );
}
var rjsOptimize = require('gulp-requirejs-optimize');
gulp.task( 'requirejs', function() {
var banner = getBanner();
// HACK src is not needed
// should refactor rjsOptimize to produce src
return gulp.src('masonry.js')
.pipe( rjsOptimize({
baseUrl: 'bower_components',
optimize: 'none',
include: [
'jquery-bridget/jquery-bridget',
'masonry/masonry'
],
paths: {
masonry: '../',
jquery: 'empty:'
}
}) )
// remove named module
.pipe( replace( "'masonry/masonry',", '' ) )
// add banner
.pipe( addBanner( banner ) )
.pipe( rename('masonry.pkgd.js') )
.pipe( gulp.dest('dist') );
});
// ----- uglify ----- //
var uglify = require('gulp-uglify');
gulp.task( 'uglify', [ 'requirejs' ], function() {
var banner = getBanner();
gulp.src('dist/masonry.pkgd.js')
.pipe( uglify() )
// add banner
.pipe( addBanner( banner ) )
.pipe( rename('masonry.pkgd.min.js') )
.pipe( gulp.dest('dist') );
});
// ----- version ----- //
// set version in source files
var minimist = require('minimist');
var gutil = require('gulp-util');
var chalk = require('chalk');
// use gulp version -t 1.2.3
gulp.task( 'version', function() {
var args = minimist( process.argv.slice(3) );
var version = args.t;
if ( !version || !/^\d\.\d+\.\d+/.test( version ) ) {
gutil.log( 'invalid version: ' + chalk.red( version ) );
return;
}
gutil.log( 'ticking version to ' + chalk.green( version ) );
gulp.src('masonry.js')
.pipe( replace( /Masonry v\d\.\d+\.\d+/, 'Masonry v' + version ) )
.pipe( gulp.dest('.') );
gulp.src( [ 'package.json' ] )
.pipe( replace( /"version": "\d\.\d+\.\d+"/, '"version": "' + version + '"' ) )
.pipe( gulp.dest('.') );
});
// ----- default ----- //
gulp.task( 'default', [
'hint',
'uglify'
]);
================================================
FILE: masonry.js
================================================
/*!
* Masonry v4.2.2
* Cascading grid layout library
* https://masonry.desandro.com
* MIT License
* by David DeSandro
*/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( [
'outlayer/outlayer',
'get-size/get-size'
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('outlayer'),
require('get-size')
);
} else {
// browser global
window.Masonry = factory(
window.Outlayer,
window.getSize
);
}
}( window, function factory( Outlayer, getSize ) {
'use strict';
// -------------------------- masonryDefinition -------------------------- //
// create an Outlayer layout class
var Masonry = Outlayer.create('masonry');
// isFitWidth -> fitWidth
Masonry.compatOptions.fitWidth = 'isFitWidth';
var proto = Masonry.prototype;
proto._resetLayout = function() {
this.getSize();
this._getMeasurement( 'columnWidth', 'outerWidth' );
this._getMeasurement( 'gutter', 'outerWidth' );
this.measureColumns();
// reset column Y
this.colYs = [];
for ( var i=0; i < this.cols; i++ ) {
this.colYs.push( 0 );
}
this.maxY = 0;
this.horizontalColIndex = 0;
};
proto.measureColumns = function() {
this.getContainerWidth();
// if columnWidth is 0, default to outerWidth of first item
if ( !this.columnWidth ) {
var firstItem = this.items[0];
var firstItemElem = firstItem && firstItem.element;
// columnWidth fall back to item of first element
this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
// if first elem has no width, default to size of container
this.containerWidth;
}
var columnWidth = this.columnWidth += this.gutter;
// calculate columns
var containerWidth = this.containerWidth + this.gutter;
var cols = containerWidth / columnWidth;
// fix rounding errors, typically with gutters
var excess = columnWidth - containerWidth % columnWidth;
// if overshoot is less than a pixel, round up, otherwise floor it
var mathMethod = excess && excess < 1 ? 'round' : 'floor';
cols = Math[ mathMethod ]( cols );
this.cols = Math.max( cols, 1 );
};
proto.getContainerWidth = function() {
// container is parent if fit width
var isFitWidth = this._getOption('fitWidth');
var container = isFitWidth ? this.element.parentNode : this.element;
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var size = getSize( container );
this.containerWidth = size && size.innerWidth;
};
proto._getItemLayoutPosition = function( item ) {
item.getSize();
// how many columns does this brick span
var remainder = item.size.outerWidth % this.columnWidth;
var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
// round if off by 1 pixel, otherwise use ceil
var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
colSpan = Math.min( colSpan, this.cols );
// use horizontal or top column position
var colPosMethod = this.options.horizontalOrder ?
'_getHorizontalColPosition' : '_getTopColPosition';
var colPosition = this[ colPosMethod ]( colSpan, item );
// position the brick
var position = {
x: this.columnWidth * colPosition.col,
y: colPosition.y
};
// apply setHeight to necessary columns
var setHeight = colPosition.y + item.size.outerHeight;
var setMax = colSpan + colPosition.col;
for ( var i = colPosition.col; i < setMax; i++ ) {
this.colYs[i] = setHeight;
}
return position;
};
proto._getTopColPosition = function( colSpan ) {
var colGroup = this._getTopColGroup( colSpan );
// get the minimum Y value from the columns
var minimumY = Math.min.apply( Math, colGroup );
return {
col: colGroup.indexOf( minimumY ),
y: minimumY,
};
};
/**
* @param {Number} colSpan - number of columns the element spans
* @returns {Array} colGroup
*/
proto._getTopColGroup = function( colSpan ) {
if ( colSpan < 2 ) {
// if brick spans only one column, use all the column Ys
return this.colYs;
}
var colGroup = [];
// how many different places could this brick fit horizontally
var groupCount = this.cols + 1 - colSpan;
// for each group potential horizontal position
for ( var i = 0; i < groupCount; i++ ) {
colGroup[i] = this._getColGroupY( i, colSpan );
}
return colGroup;
};
proto._getColGroupY = function( col, colSpan ) {
if ( colSpan < 2 ) {
return this.colYs[ col ];
}
// make an array of colY values for that one group
var groupColYs = this.colYs.slice( col, col + colSpan );
// and get the max value of the array
return Math.max.apply( Math, groupColYs );
};
// get column position based on horizontal index. #873
proto._getHorizontalColPosition = function( colSpan, item ) {
var col = this.horizontalColIndex % this.cols;
var isOver = colSpan > 1 && col + colSpan > this.cols;
// shift to next row if item can't fit on current row
col = isOver ? 0 : col;
// don't let zero-size items take up space
var hasSize = item.size.outerWidth && item.size.outerHeight;
this.horizontalColIndex = hasSize ? col + colSpan : this.horizontalColIndex;
return {
col: col,
y: this._getColGroupY( col, colSpan ),
};
};
proto._manageStamp = function( stamp ) {
var stampSize = getSize( stamp );
var offset = this._getElementOffset( stamp );
// get the columns that this stamp affects
var isOriginLeft = this._getOption('originLeft');
var firstX = isOriginLeft ? offset.left : offset.right;
var lastX = firstX + stampSize.outerWidth;
var firstCol = Math.floor( firstX / this.columnWidth );
firstCol = Math.max( 0, firstCol );
var lastCol = Math.floor( lastX / this.columnWidth );
// lastCol should not go over if multiple of columnWidth #425
lastCol -= lastX % this.columnWidth ? 0 : 1;
lastCol = Math.min( this.cols - 1, lastCol );
// set colYs to bottom of the stamp
var isOriginTop = this._getOption('originTop');
var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) +
stampSize.outerHeight;
for ( var i = firstCol; i <= lastCol; i++ ) {
this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
}
};
proto._getContainerSize = function() {
this.maxY = Math.max.apply( Math, this.colYs );
var size = {
height: this.maxY
};
if ( this._getOption('fitWidth') ) {
size.width = this._getContainerFitWidth();
}
return size;
};
proto._getContainerFitWidth = function() {
var unusedCols = 0;
// count unused columns
var i = this.cols;
while ( --i ) {
if ( this.colYs[i] !== 0 ) {
break;
}
unusedCols++;
}
// fit container to columns that have been used
return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
};
proto.needsResizeLayout = function() {
var previousWidth = this.containerWidth;
this.getContainerWidth();
return previousWidth != this.containerWidth;
};
return Masonry;
}));
================================================
FILE: package.json
================================================
{
"name": "masonry-layout",
"version": "4.2.2",
"description": "Cascading grid layout library",
"main": "masonry.js",
"dependencies": {
"get-size": "^2.0.2",
"outlayer": "^2.1.0"
},
"devDependencies": {
"chalk": "^1.1.1",
"gulp": "^3.9.0",
"gulp-jshint": "^2.0.0",
"gulp-json-lint": "^0.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-requirejs-optimize": "metafizzy/gulp-requirejs-optimize",
"gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.7",
"jquery": ">=1.4.3 <4",
"jquery-bridget": "~2.0.0",
"jshint": "^2.8.0",
"minimist": "^1.2.0",
"qunitjs": "^1.12"
},
"directories": {
"test": "test"
},
"scripts": {
"test": "test/index.html"
},
"repository": {
"type": "git",
"url": "git://github.com/desandro/masonry.git"
},
"keywords": [
"DOM",
"browser",
"grid",
"layout",
"outlayer"
],
"author": "David DeSandro",
"license": "MIT",
"bugs": {
"url": "https://github.com/desandro/masonry/issues"
},
"homepage": "https://masonry.desandro.com",
"files": [
"dist",
"masonry.js"
]
}
================================================
FILE: sandbox/add-items.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>add items</title>
<style>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
background: #DDD;
}
/* clearfix */
.grid:after {
display: block;
content: '';
clear: both;
}
.grid-sizer,
.grid-item {
width: 25%;
}
.grid-item {
border: 1px solid;
background: #09F;
height: 100px;
}
.grid-item--width2 { width: 50%; }
.grid-item--height2 { height: 160px; }
.grid-item--height3 { height: 220px; }
</style>
</head>
<body>
<h1>add items</h1>
<p>
<button class="prepend-button">Prepend button</button>
<button class="append-button">Append button</button>
</p>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../masonry.js"></script>
<script>
function getItemElement() {
var elem = document.createElement('div');
var wRand = Math.random();
var hRand = Math.random();
var widthClass = wRand > 0.8 ? 'grid-item--width3' :
wRand > 0.6 ? 'grid-item--width2' : '';
var heightClass = hRand > 0.8 ? 'grid-item--height3' :
hRand > 0.5 ? 'grid-item--height2' : '';
elem.className = 'grid-item ' + widthClass + ' ' + heightClass;
return elem;
};
var msnry = new Masonry( '.grid', {
columnWidth: '.grid-sizer',
percentPosition: true
});
document.querySelector('.prepend-button').addEventListener( 'click', function() {
var itemElem = getItemElement();
msnry.element.insertBefore( itemElem, msnry.element.firstChild );
msnry.prepended( itemElem );
});
document.querySelector('.append-button').addEventListener( 'click', function() {
var itemElem = getItemElement();
msnry.element.appendChild( itemElem );
msnry.appended( itemElem );
});
</script>
</body>
</html>
================================================
FILE: sandbox/basic.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>basic</title>
<link rel="stylesheet" href="sandbox.css" />
</head>
<body>
<h1>basic</h1>
<div id="basic" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../masonry.js"></script>
<script>
var container = document.querySelector('#basic');
var msnry = new Masonry( container, {
columnWidth: 60
});
</script>
</body>
</html>
================================================
FILE: sandbox/bottom-up.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bottom up</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
#stamped .stamp1 {
width: 30%;
height: 100px;
left: 30%;
bottom: 20px;
}
#stamped .stamp2 {
width: 200px;
height: 50px;
left: 20px;
bottom: 50px;
}
</style>
</head>
<body>
<h1>bottom up</h1>
<div id="basic" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<div id="stamped" class="container">
<div class="stamp stamp1"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../masonry.js"></script>
<script>
( function() {
var container = document.querySelector('#basic');
var msnry = new Masonry( container, {
isOriginTop: false,
columnWidth: 60
});
})();
( function() {
var container = document.querySelector('#stamped');
var msnry = new Masonry( container, {
itemSelector: '.item',
isOriginTop: false,
columnWidth: 60,
gutter: 10,
stamp: '.stamp'
});
})();
</script>
</body>
</html>
================================================
FILE: sandbox/browserify/index.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>browserify</title>
<link rel="stylesheet" href="../sandbox.css" />
</head>
<body>
<h1>browserify</h1>
<div id="basic" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<script src="bundle.js"></script>
</body>
</html>
================================================
FILE: sandbox/browserify/main.js
================================================
// vanilla js
var Masonry = require('../../masonry');
new Masonry( '#basic', {
columnWidth: 60
});
// jquery
// var $ = require('jquery');
// var jQBridget = require('jquery-bridget');
// var Masonry = require('../../masonry');
//
// $.bridget( 'masonry', Masonry );
//
// $('#basic').masonry({
// columnWidth: 60
// });
================================================
FILE: sandbox/element-sizing.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>element sizing</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
/* #container { width: 501px; }*/
.item, .grid-sizer { width: 20%; }
.item.w2 { width: 40%; }
.item.w3 { width: 60%; }
</style>
</head>
<body>
<h1>element sizing</h1>
<div id="container" class="container">
<div class="grid-sizer"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../masonry.js"></script>
<script>
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
columnWidth: '.grid-sizer',
percentPosition: true
});
</script>
</body>
</html>
================================================
FILE: sandbox/fit-width.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fit width</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
.container {
margin: 0 auto;
}
</style>
</head>
<body>
<h1>fit width</h1>
<div class="container">
<div class="item w2"></div>
<div class="item w2 h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item w2 h3"></div>
<div class="item w4"></div>
<div class="item w2"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item w2 h4"></div>
<div class="item w4"></div>
<div class="item w2 h5"></div>
<div class="item w4"></div>
<div class="item w2"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item w2 h3"></div>
<div class="item w4"></div>
<div class="item w2"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../masonry.js"></script>
<script>
var msnry = new Masonry( '.container', {
fitWidth: true,
columnWidth: 120
});
</script>
</body>
</html>
================================================
FILE: sandbox/fluid.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fluid</title>
<style>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
background: #DDD;
}
/* clearfix */
.grid:after {
display: block;
content: '';
clear: both;
}
.grid-sizer,
.grid-item {
width: 25%;
}
.grid-item {
border: 1px solid;
background: #09F;
height: 100px;
}
.grid-item--width2 { width: 50%; }
.grid-item--height2 { height: 160px; }
.grid-item--height3 { height: 220px; }
</style>
</head>
<body>
<h1>fluid</h1>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../masonry.js"></script>
<script>
var msnry = new Masonry( '.grid', {
columnWidth: '.grid-sizer',
percentPosition: true
});
</script>
</body>
</html>
================================================
FILE: sandbox/horizontal-order.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>horizontal order</title>
<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.grid {
background: #DDD;
max-width: 900px;
margin-bottom: 60px;
}
.grid-item {
float: left;
width: 150px;
height: 150px;
border: 1px solid #333;
color: white;
font-size: 20px;
background: #19F;
counter-increment: grid-item;
}
.grid-item:before {
content: counter(grid-item);
padding: 10px;
}
.grid-item--width2 { width: 300px; }
.grid-item--width3 { width: 450px; }
.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 250px; }
.grid-item.is-zero { height: 0; border: none; }
.stamp {
border: 1px solid #333;
background: #E21;
position: absolute;
}
.stamp--1 {
width: 300px;
height: 200px;
right: 0;
top: 0;
}
</style>
</head>
<body>
<h1>horizontal order</h1>
<div class="grid grid--1">
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item is-zero"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--width3"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
</div>
<div class="grid grid--2">
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
</div>
<div class="grid grid--3">
<div class="stamp stamp--1"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../masonry.js"></script>
<script>
new Masonry( '.grid--1', {
itemSelector: '.grid-item',
horizontalOrder: true,
});
new Masonry( '.grid--2', {
itemSelector: '.grid-item',
horizontalOrder: true,
});
new Masonry( '.grid--3', {
itemSelector: '.grid-item',
horizontalOrder: true,
stamp: '.stamp',
})
</script>
</body>
</html>
================================================
FILE: sandbox/jquery.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<link rel="stylesheet" href="sandbox.css" />
</head>
<body>
<h1>jQuery</h1>
<div id="basic" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../masonry.js"></script>
<script>
$('#basic').masonry({
columnWidth: 60
});
</script>
</body>
</html>
================================================
FILE: sandbox/require-js/index.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>require js</title>
<link rel="stylesheet" href="../sandbox.css" />
<script data-main="main" src="https://unpkg.com/requirejs@2.1/require.js"></script>
</head>
<body>
<h1>require js</h1>
<div id="basic" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
</body>
</html>
================================================
FILE: sandbox/require-js/main.js
================================================
/*global requirejs: false*/
// -------------------------- pkgd -------------------------- //
/*
requirejs( [ '../../dist/masonry.pkgd' ], function( Masonry ) {
new Masonry( document.querySelector('#basic') );
});
// */
// -------------------------- bower -------------------------- //
/*
requirejs.config({
baseUrl: '../bower_components'
});
requirejs( [ '../masonry' ], function( Masonry ) {
new Masonry( document.querySelector('#basic') );
});
// */
// -------------------------- pkgd & jQuery -------------------------- //
// /*
requirejs.config({
paths: {
jquery: '../../bower_components/jquery/dist/jquery'
}
});
requirejs( [ 'require', 'jquery', '../../dist/masonry.pkgd' ],
function( require, $, Masonry ) {
require( [
'jquery-bridget/jquery-bridget'
],
function() {
$.bridget( 'masonry', Masonry );
$('#basic').masonry({
columnWidth: 60
});
}
);
});
// */
// -------------------------- bower & jQuery -------------------------- //
/*
requirejs.config({
baseUrl: '../bower_components',
paths: {
jquery: 'jquery/dist/jquery'
}
});
requirejs( [
'jquery',
'../masonry',
'jquery-bridget/jquery-bridget'
],
function( $, Masonry ) {
$.bridget( 'masonry', Masonry );
$('#basic').masonry({
columnWidth: 60
});
}
);
// */
================================================
FILE: sandbox/right-to-left.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>right to left</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
#stamped .stamp1 {
width: 30%;
height: 100px;
left: 30%;
top: 20px;
margin: 10px;
}
#stamped .stamp2 {
width: 200px;
height: 50px;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<h1>right to left</h1>
<div id="basic" class="container">
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<div id="stamped" class="container">
<div class="stamp stamp1"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item w2 h2"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h4"></div>
<div class="item w2"></div>
<div class="item h5"></div>
<div class="item w3"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item w2 h5"></div>
<div class="item w2"></div>
<div class="item h3"></div>
<div class="item w3"></div>
<div class="item"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../masonry.js"></script>
<script>
( function() {
var container = document.querySelector('#basic');
var msnry = new Masonry( container, {
originLeft: false,
columnWidth: 60
});
})();
( function() {
var container = document.querySelector('#stamped');
var msnry = new Masonry( container, {
itemSelector: '.item',
originLeft: false,
columnWidth: 60,
gutter: 10,
stamp: '.stamp'
});
})();
</script>
</body>
</html>
================================================
FILE: sandbox/sandbox.css
================================================
* {
box-sizing: border-box;
}
.container {
background: #EEE;
width: 50%;
margin-bottom: 20px;
}
.item {
width: 60px;
height: 60px;
float: left;
border: 1px solid;
background: #09F;
}
.item.w2 { width: 120px; }
.item.w3 { width: 180px; }
.item.w4 { width: 240px; }
.item.h2 { height: 100px; }
.item.h3 { height: 160px; }
.item.h4 { height: 220px; }
.item.h5 { height: 280px; }
.stamp {
background: red;
opacity: 0.75;
position: absolute;
border: 1px solid;
}
================================================
FILE: sandbox/stamps.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>stamps</title>
<link rel="stylesheet" href="sandbox.css" />
<style>
#alpha .stamp1 {
width: 30%;
height: 100px;
left: 30%;
top: 20px;
}
#alpha .stamp2 {
width: 200px;
height: 50px;
left: 20px;
top: 50px;
}
#beta {
border-style: solid;
border-width: 40px 30px 20px 10px;
padding: 10px 20px 30px 40px;
}
#beta .stamp1 {
width: 30%;
height: 100px;
left: 10%;
top: 20px;
}
#beta .stamp2 {
width: 200px;
height: 50px;
right: 20px;
top: 50px;
}
</style>
</head>
<body>
<h1>stamps</h1>
<div id="alpha" class="container">
<div class="stamp stamp1"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
</div>
<div id="beta" class="container">
<div class="stamp stamp2"></div>
<div class="stamp stamp1"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
<div class="item h4"></div>
<div class="item"></div>
</div>
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../masonry.js"></script>
<script>
( function() {
var container = document.querySelector('#alpha');
var msnry = new Masonry( container, {
itemSelector: '.item',
columnWidth: 60,
gutter: 10,
stamp: '.stamp'
});
})();
( function() {
var container = document.querySelector('#beta');
var msnry = new Masonry( container, {
columnWidth: 60,
gutter: 10,
stamp: '.stamp'
});
})();
</script>
</body>
</html>
================================================
FILE: test/.jshintrc
================================================
{
"browser": true,
"devel": false,
"undef": true,
"unused": true,
"globals": {
"getSize": false,
"Masonry": false,
"checkItemPositions": false,
"QUnit": false
}
}
================================================
FILE: test/helpers.js
================================================
window.checkItemPositions = function( msnry, assert, positions ) {
var i = 0;
var position = positions[i];
while ( position ) {
var style = msnry.items[i].element.style;
for ( var prop in position ) {
var value = position[ prop ] + 'px';
var message = 'item ' + i + ' ' + prop + ' = ' + value;
assert.equal( style[ prop ], value, message );
}
i++;
position = positions[i];
}
};
================================================
FILE: test/index.html
================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Masonry tests</title>
<link rel="stylesheet" href="tests.css" />
<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" />
<script src="../bower_components/ev-emitter/ev-emitter.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
<script src="../bower_components/fizzy-ui-utils/utils.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/qunit/qunit/qunit.js"></script>
<script src="../masonry.js"></script>
<script src="helpers.js"></script>
<!-- tests -->
<script src="unit/basic-layout.js"></script>
<script src="unit/gutter.js"></script>
<script src="unit/stamp.js"></script>
<script src="unit/fit-width.js"></script>
<script src="unit/empty.js"></script>
<script src="unit/zero-column-width.js"></script>
<script src="unit/element-sizing.js"></script>
<script src="unit/pixel-rounding.js"></script>
<script src="unit/horizontal-order.js"></script>
</head>
<body>
<h1>Masonry tests</h1>
<div id="qunit"></div>
<h2>Basic layout top left</h2>
<div id="basic-layout-top-left" class="container basic-layout">
<div class="item"></div>
<div class="item h4"></div>
<div class="item h3"></div>
<div class="item h3"></div>
<div class="item w2"></div>
</div>
<h2>Basic layout top right</h2>
<div id="basic-layout-top-right" class="container basic-layout">
<div class="item"></div>
<div class="item h4"></div>
<div class="item h3"></div>
<div class="item h3"></div>
<div class="item w2"></div>
</div>
<h2>Basic layout bottom left</h2>
<div id="basic-layout-bottom-left" class="container basic-layout">
<div class="item"></div>
<div class="item h4"></div>
<div class="item h3"></div>
<div class="item h3"></div>
<div class="item w2"></div>
</div>
<h2>Basic layout bottom right</h2>
<div id="basic-layout-bottom-right" class="container basic-layout">
<div class="item"></div>
<div class="item h4"></div>
<div class="item h3"></div>
<div class="item h3"></div>
<div class="item w2"></div>
</div>
<h2>Gutter</h2>
<div id="gutter" class="container has-stamp">
<div class="item"></div>
<div class="item"></div>
<div class="item h3"></div>
<div class="item w2"></div>
</div>
<h2>Stamp</h2>
<div id="stamp-top-left" class="container has-stamp">
<div class="stamp stamp1"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="stamp-column-width-multiple" class="container has-stamp">
<div class="stamp stamp1"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="stamp-bottom-right" class="container has-stamp">
<div class="stamp stamp1"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>fit width</h2>
<div id="fit-width">
<div class="container">
<div class="item"></div>
<div class="item h2"></div>
<div class="item h3"></div>
</div>
</div>
<h2>Empty</h2>
<div id="empty" class="container"></div>
<h2>zero columnWidth</h2>
<div id="zero-column-width" class="container">
<div class="item hidden"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>Element sizing</h2>
<div id="element-sizing" class="container">
<div class="grid-sizer"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>Pixel rounding</h2>
<div id="pixel-rounding" class="container">
<div class="gutter-sizer"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>Horizontal order</h2>
<div id="horizontal-order" class="container">
<div class="item h3">1</div>
<div class="item h2">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item h3">5</div>
<div class="item h2">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
================================================
FILE: test/tests.css
================================================
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.container {
background: #EEE;
width: 180px;
margin-bottom: 20px;
position: relative;
}
.item {
width: 60px;
height: 30px;
float: left;
border: 1px solid;
background: #09F;
}
.item.w2 { width: 120px; }
.item.w3 { width: 180px; }
.item.h2 { height: 50px; }
.item.h3 { height: 70px; }
.item.h4 { height: 90px; }
.item.h5 { height: 110px; }
.stamp {
background: red;
opacity: 0.75;
position: absolute;
border: 1px solid;
}
/* ---- gutter ---- */
#gutter {
width: 220px;
}
#gutter .item.w2 { width: 140px; }
/* ---- stamp ---- */
.has-stamp .item { width: 45px; }
/* stout, in the middle */
.has-stamp .stamp1 {
width: 40px;
height: 30px;
}
/* really wide */
.has-stamp .stamp2 {
width: 200px;
height: 20px;
}
#stamp-top-left .stamp1 {
left: 70px;
top: 10px;
}
#stamp-top-left .stamp2 {
left: -5px;
top: 0;
}
#stamp-column-width-multiple .stamp1 {
width: 90px;
left: 45px;
top: 0;
}
#stamp-bottom-right .stamp1 {
right: 70px;
bottom: 10px;
}
#stamp-bottom-right .stamp2 {
right: -5px;
bottom: 0;
}
/* ---- fit width ---- */
#fit-width {
width: 160px;
background: #CCC;
}
#fit-width .container {
margin: 0 auto;
}
/* ---- ---- */
#zero-column-width .hidden {
display: none;
}
/* ---- element-sizing ---- */
#element-sizing {
width: 181px;
}
#element-sizing .item,
#element-sizing .grid-sizer { width: 20%; }
#element-sizing .item.w2 { width: 40%; }
/* ---- pixel-rounding ---- */
#pixel-rounding {
width: 170px;
}
#pixel-rounding .item { width: 28.667%; }
#pixel-rounding .gutter-sizer { width: 7%; }
================================================
FILE: test/unit/basic-layout.js
================================================
QUnit.test( 'basic layout top left', function( assert ) {
var msnry = new Masonry( '#basic-layout-top-left', {
columnWidth: 60
});
checkItemPositions( msnry, assert, {
0: {
left: 0,
top: 0
},
1: {
left: 60,
top: 0
},
2: {
left: 120,
top: 0
},
3: {
left: 0,
top: 30
},
4: {
left: 60,
top: 90
}
});
});
QUnit.test( 'basic layout top right', function( assert ) {
var msnry = new Masonry( '#basic-layout-top-right', {
isOriginLeft: false,
columnWidth: 60
});
checkItemPositions( msnry, assert, {
0: {
right: 0,
top: 0
},
1: {
right: 60,
top: 0
},
2: {
right: 120,
top: 0
},
3: {
right: 0,
top: 30
},
4: {
right: 60,
top: 90
}
});
});
QUnit.test( 'basic layout bottom left', function( assert ) {
var msnry = new Masonry( '#basic-layout-bottom-left', {
isOriginTop: false,
columnWidth: 60
});
checkItemPositions( msnry, assert, {
0: {
left: 0,
bottom: 0
},
1: {
left: 60,
bottom: 0
},
2: {
left: 120,
bottom: 0
},
3: {
left: 0,
bottom: 30
},
4: {
left: 60,
bottom: 90
}
});
});
QUnit.test( 'basic layout bottom right', function( assert ) {
var msnry = new Masonry( '#basic-layout-bottom-right', {
isOriginLeft: false,
isOriginTop: false,
columnWidth: 60
});
checkItemPositions( msnry, assert, {
0: {
right: 0,
bottom: 0
},
1: {
right: 60,
bottom: 0
},
2: {
right: 120,
bottom: 0
},
3: {
right: 0,
bottom: 30
},
4: {
right: 60,
bottom: 90
}
});
});
================================================
FILE: test/unit/element-sizing.js
================================================
QUnit.test( 'element sizing', function( assert ) {
var container = document.querySelector('#element-sizing');
var msnry = new Masonry( container, {
columnWidth: '.grid-sizer',
itemSelector: '.item',
transitionDuration: 0
});
var lastItem = msnry.items[3];
var containerWidth = 170;
while ( containerWidth < 190 ) {
container.style.width = containerWidth + 'px';
msnry.layout();
assert.equal( lastItem.position.y, 0,'4th item on top row, container width = ' + containerWidth );
containerWidth++;
}
});
================================================
FILE: test/unit/empty.js
================================================
QUnit.test( 'empty', function( assert ) {
var container = document.querySelector('#empty');
var msnry = new Masonry( container );
assert.ok( true, 'empty masonry did not throw error' );
assert.equal( msnry.columnWidth, getSize( container ).innerWidth, 'columnWidth = innerWidth' );
});
================================================
FILE: test/unit/fit-width.js
================================================
QUnit.test( 'fit width', function( assert ) {
var container = document.querySelector('#fit-width .container');
var msnry = new Masonry( container, {
columnWidth: 60,
isFitWidth: true
});
assert.equal( msnry.cols, 2, '2 columns' );
assert.equal( msnry.cols * msnry.columnWidth + 'px', container.style.width, 'width set to match' );
});
================================================
FILE: test/unit/gutter.js
================================================
QUnit.test( 'gutter', function( assert ) {
var msnry = new Masonry( '#gutter', {
columnWidth: 60,
gutter: 20
});
checkItemPositions( msnry, assert, {
0: { left: 0, top: 0 },
1: { left: 80, top: 0 },
2: { left: 160, top: 0 },
3: { left: 0, top: 30 }
});
});
================================================
FILE: test/unit/horizontal-order.js
================================================
QUnit.test( 'horizontal order', function( assert ) {
var grid = document.querySelector('#horizontal-order');
var itemElems = grid.querySelectorAll('.item');
new Masonry( grid, {
horizontalOrder: true,
});
// items should match %3 column
for ( var i=0; i < itemElems.length; i++ ) {
var itemElem = itemElems[i];
var col = i % 3;
var left = col * 60 + 'px';
var message = 'item ' + (i+1) + ', column' + (col + 1);
assert.equal( itemElem.style.left, left, message );
}
});
================================================
FILE: test/unit/pixel-rounding.js
================================================
QUnit.test( 'pixel rounding', function( assert ) {
var container = document.querySelector('#pixel-rounding');
var msnry = new Masonry( container, {
gutter: '.gutter-sizer',
itemSelector: '.item',
transitionDuration: 0
});
var lastItem = msnry.items[2];
var containerWidth = 170;
while ( containerWidth < 210 ) {
container.style.width = containerWidth + 'px';
msnry.layout();
assert.equal( lastItem.position.y, 0,'3rd item on top row, container width = ' + containerWidth );
containerWidth++;
}
});
================================================
FILE: test/unit/stamp.js
================================================
QUnit.test( 'stamp top left', function( assert ) {
var msnry = new Masonry( '#stamp-top-left', {
itemSelector: '.item',
stamp: '.stamp'
});
checkItemPositions( msnry, assert, {
0: { left: 0, top: 20 },
1: { left: 135, top: 20 },
2: { left: 45, top: 40 },
3: { left: 90, top: 40 }
});
});
QUnit.test( 'stamp columnWidth multiple', function( assert ) {
var msnry = new Masonry( '#stamp-column-width-multiple', {
itemSelector: '.item',
stamp: '.stamp'
});
checkItemPositions( msnry, assert, {
0: { left: 0, top: 0 },
1: { left: 135, top: 0 },
2: { left: 0, top: 30 },
3: { left: 45, top: 30 }
});
});
QUnit.test( 'stamp bottom right', function( assert ) {
var msnry = new Masonry( '#stamp-bottom-right', {
itemSelector: '.item',
stamp: '.stamp',
isOriginLeft: false,
isOriginTop: false
});
checkItemPositions( msnry, assert, {
0: { right: 0, bottom: 20 },
1: { right: 135, bottom: 20 },
2: { right: 45, bottom: 40 },
3: { right: 90, bottom: 40 }
});
});
================================================
FILE: test/unit/zero-column-width.js
================================================
QUnit.test( 'zero column width', function( assert ) {
var msnry = new Masonry( '#zero-column-width' );
assert.equal( msnry.columnWidth, 180, 'columnWidth = container innerWidth');
});
gitextract_fdgpdcv5/
├── .github/
│ ├── contributing.md
│ └── issue_template.md
├── .gitignore
├── .jshintrc
├── README.md
├── bower.json
├── composer.json
├── dist/
│ └── masonry.pkgd.js
├── gulpfile.js
├── masonry.js
├── package.json
├── sandbox/
│ ├── add-items.html
│ ├── basic.html
│ ├── bottom-up.html
│ ├── browserify/
│ │ ├── index.html
│ │ └── main.js
│ ├── element-sizing.html
│ ├── fit-width.html
│ ├── fluid.html
│ ├── horizontal-order.html
│ ├── jquery.html
│ ├── require-js/
│ │ ├── index.html
│ │ └── main.js
│ ├── right-to-left.html
│ ├── sandbox.css
│ └── stamps.html
└── test/
├── .jshintrc
├── helpers.js
├── index.html
├── tests.css
└── unit/
├── basic-layout.js
├── element-sizing.js
├── empty.js
├── fit-width.js
├── gutter.js
├── horizontal-order.js
├── pixel-rounding.js
├── stamp.js
└── zero-column-width.js
SYMBOL INDEX (19 symbols across 2 files)
FILE: dist/masonry.pkgd.js
function jQueryBridget (line 56) | function jQueryBridget( namespace, PluginClass, $ ) {
function updateJQuery (line 138) | function updateJQuery( $ ) {
function EvEmitter (line 179) | function EvEmitter() {}
function getStyleSize (line 294) | function getStyleSize( value ) {
function noop (line 301) | function noop() {}
function getZeroSize (line 327) | function getZeroSize() {
function getStyle (line 349) | function getStyle( elem ) {
function setup (line 370) | function setup() {
function getSize (line 402) | function getSize( elem ) {
function isEmptyObj (line 805) | function isEmptyObj( obj ) {
function Item (line 839) | function Item( element, layout ) {
function toDashedAll (line 1090) | function toDashedAll( str ) {
function Outlayer (line 1389) | function Outlayer( element, options ) {
function onComplete (line 1766) | function onComplete() {
function tick (line 1777) | function tick() {
function subclass (line 2220) | function subclass( Parent ) {
function getMilliseconds (line 2241) | function getMilliseconds( time ) {
FILE: gulpfile.js
function getBanner (line 45) | function getBanner() {
function addBanner (line 52) | function addBanner( str ) {
Condensed preview — 39 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (127K chars).
[
{
"path": ".github/contributing.md",
"chars": 924,
"preview": "## Submitting issues\n\n### Reduced test case required\n\nAll bug reports and problem issues require a [**reduced test case*"
},
{
"path": ".github/issue_template.md",
"chars": 258,
"preview": "<!-- Thanks for submitting an issue! All bug reports and problem issues require a **reduced test case**. Create one by f"
},
{
"path": ".gitignore",
"chars": 65,
"preview": "components/\nbower_components/\nnode_modules/\nsandbox/**/bundle.js\n"
},
{
"path": ".jshintrc",
"chars": 93,
"preview": "{\n \"browser\": true,\n \"devel\": false,\n \"strict\": true,\n \"undef\": true,\n \"unused\": true\n}\n"
},
{
"path": "README.md",
"chars": 2064,
"preview": "# Masonry\n\n_Cascading grid layout library_\n\nMasonry works by placing elements in optimal position based on available ver"
},
{
"path": "bower.json",
"chars": 698,
"preview": "{\n \"name\": \"masonry-layout\",\n \"description\": \"Cascading grid layout library\",\n \"main\": \"masonry.js\",\n \"dependencies\""
},
{
"path": "composer.json",
"chars": 393,
"preview": "{\n \"name\": \"desandro/masonry\",\n \"description\": \"Cascading grid layout library\",\n \"type\": \"component\",\n \"keywords\": ["
},
{
"path": "dist/masonry.pkgd.js",
"chars": 63316,
"preview": "/*!\n * Masonry PACKAGED v4.2.2\n * Cascading grid layout library\n * https://masonry.desandro.com\n * MIT License\n * by Dav"
},
{
"path": "gulpfile.js",
"chars": 3219,
"preview": "/*jshint node: true, strict: false */\n\nvar fs = require('fs');\nvar gulp = require('gulp');\nvar rename = require('gulp-re"
},
{
"path": "masonry.js",
"chars": 7473,
"preview": "/*!\n * Masonry v4.2.2\n * Cascading grid layout library\n * https://masonry.desandro.com\n * MIT License\n * by David DeSand"
},
{
"path": "package.json",
"chars": 1143,
"preview": "{\n \"name\": \"masonry-layout\",\n \"version\": \"4.2.2\",\n \"description\": \"Cascading grid layout library\",\n \"main\": \"masonry"
},
{
"path": "sandbox/add-items.html",
"chars": 2335,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>add items</title>\n\n <style>\n * {\n -webkit-box-sizi"
},
{
"path": "sandbox/basic.html",
"chars": 1476,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>basic</title>\n\n <link rel=\"stylesheet\" href=\"sandbox.c"
},
{
"path": "sandbox/bottom-up.html",
"chars": 2788,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>bottom up</title>\n\n <link rel=\"stylesheet\" href=\"sandb"
},
{
"path": "sandbox/browserify/index.html",
"chars": 936,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>browserify</title>\n\n <link rel=\"stylesheet\" href=\"../s"
},
{
"path": "sandbox/browserify/main.js",
"chars": 329,
"preview": "// vanilla js\n\nvar Masonry = require('../../masonry');\n\nnew Masonry( '#basic', {\n columnWidth: 60\n});\n\n// jquery\n\n// va"
},
{
"path": "sandbox/element-sizing.html",
"chars": 1727,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>element sizing</title>\n\n <link rel=\"stylesheet\" href=\""
},
{
"path": "sandbox/fit-width.html",
"chars": 1548,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>fit width</title>\n\n <link rel=\"stylesheet\" href=\"sandb"
},
{
"path": "sandbox/fluid.html",
"chars": 1748,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>fluid</title>\n\n <style>\n * {\n -webkit-box-sizing: "
},
{
"path": "sandbox/horizontal-order.html",
"chars": 4037,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width\" />\n\n <tit"
},
{
"path": "sandbox/jquery.html",
"chars": 1560,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>jQuery</title>\n\n <link rel=\"stylesheet\" href=\"sandbox."
},
{
"path": "sandbox/require-js/index.html",
"chars": 987,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>require js</title>\n\n <link rel=\"stylesheet\" href=\"../s"
},
{
"path": "sandbox/require-js/main.js",
"chars": 1343,
"preview": "/*global requirejs: false*/\n\n// -------------------------- pkgd -------------------------- //\n\n/*\nrequirejs( [ '../../di"
},
{
"path": "sandbox/right-to-left.html",
"chars": 2808,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>right to left</title>\n\n <link rel=\"stylesheet\" href=\"s"
},
{
"path": "sandbox/sandbox.css",
"chars": 490,
"preview": "* {\n box-sizing: border-box;\n}\n\n.container {\n background: #EEE;\n width: 50%;\n margin-bottom: 20px;\n}\n\n.item {\n widt"
},
{
"path": "sandbox/stamps.html",
"chars": 2443,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>stamps</title>\n\n\n <link rel=\"stylesheet\" href=\"sandbox"
},
{
"path": "test/.jshintrc",
"chars": 191,
"preview": "{\n \"browser\": true,\n \"devel\": false,\n \"undef\": true,\n \"unused\": true,\n \"globals\": {\n \"getSize\": false,\n \"Maso"
},
{
"path": "test/helpers.js",
"chars": 424,
"preview": "window.checkItemPositions = function( msnry, assert, positions ) {\n var i = 0;\n var position = positions[i];\n while ("
},
{
"path": "test/index.html",
"chars": 4716,
"preview": "<!doctype html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n\n <title>Masonry tests</title>\n\n <link rel=\"stylesheet\" href=\"t"
},
{
"path": "test/tests.css",
"chars": 1746,
"preview": "* {\n -webkit-box-sizing: border-box;\n -moz-box-sizing: border-box;\n box-sizing: border-box;\n}\n\nbody {\n fo"
},
{
"path": "test/unit/basic-layout.js",
"chars": 1817,
"preview": "QUnit.test( 'basic layout top left', function( assert ) {\n var msnry = new Masonry( '#basic-layout-top-left', {\n col"
},
{
"path": "test/unit/element-sizing.js",
"chars": 546,
"preview": "QUnit.test( 'element sizing', function( assert ) {\n var container = document.querySelector('#element-sizing');\n var ms"
},
{
"path": "test/unit/empty.js",
"chars": 297,
"preview": "QUnit.test( 'empty', function( assert ) {\n\n var container = document.querySelector('#empty');\n var msnry = new Masonry"
},
{
"path": "test/unit/fit-width.js",
"chars": 356,
"preview": "QUnit.test( 'fit width', function( assert ) {\n\n var container = document.querySelector('#fit-width .container');\n var "
},
{
"path": "test/unit/gutter.js",
"chars": 292,
"preview": "QUnit.test( 'gutter', function( assert ) {\n\n var msnry = new Masonry( '#gutter', {\n columnWidth: 60,\n gutter: 20\n"
},
{
"path": "test/unit/horizontal-order.js",
"chars": 511,
"preview": "QUnit.test( 'horizontal order', function( assert ) {\n\n var grid = document.querySelector('#horizontal-order');\n var it"
},
{
"path": "test/unit/pixel-rounding.js",
"chars": 543,
"preview": "QUnit.test( 'pixel rounding', function( assert ) {\n var container = document.querySelector('#pixel-rounding');\n var ms"
},
{
"path": "test/unit/stamp.js",
"chars": 1066,
"preview": "QUnit.test( 'stamp top left', function( assert ) {\n\n var msnry = new Masonry( '#stamp-top-left', {\n itemSelector: '."
},
{
"path": "test/unit/zero-column-width.js",
"chars": 188,
"preview": "QUnit.test( 'zero column width', function( assert ) {\n var msnry = new Masonry( '#zero-column-width' );\n assert.equal("
}
]
About this extraction
This page contains the full source code of the desandro/masonry GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 39 files (116.1 KB), approximately 33.2k tokens, and a symbol index with 19 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.