A simple masonry replacement.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
br4nnigan d15f590133 Merge branch 'master' of https://github.com/br4nnigan/masonry 9 months ago
dist moved example.html 3 years ago
src fixed bug that would leave additional placeholder elements after viewport resizing 9 months ago
LICENSE Initial commit 3 years ago
README.md Update README.md 9 months ago
package.json removed Hammer dependency as tap delay is no more 9 months ago


this is a light weight replacement for the popular Masonry javascript plugin. It's only supposed to handle items of same width, so it adjusts each rows height OR shifts each columns items vertically, so all items have a common vertical margin. Also features a filter based on custom categories.



var masonry = new Masonry( element, options )

accepts a root element and and an options object. Masonry items are queried within the root element using the selector .masonry--item. They must have the attributes display: inline-block and vertical-align: top and should have a width set in %


filterContainer : Element

If you want to work with categories you can specify a container element here. Otherwise it will be added to the root element.

sameHeight : Boolean

Items of one row are set to have the same height (min-height actually), instead of being aligned vertically.

onBeforeCategoryChange : Void -> Void

Function called before a category changes

plugins : Array

Array of plugins to use (see below).



On click of an item toggles a drawer below in a new row. The drawer dom element must exist within the item element and have the class masonry--item__drawer and should be display: none. This currently only works when the sameHeight option is used.

Filter categories

Items may have the dom attribute data-category set and masonry will create a list of filter buttons.


masonry.getItems( includePlaceholders, includeHidden )

returns the masonry items.

includePlaceholders : Boolean

placeholders are used in static layouts to make the last line work in justify layouts

includeHidden : Boolean

includes items currently hidden by filter (if filter categories are used)


removes all event listeners


returns the number of columns of the masonry

masonry.setOption( key, value )

setting an option on the instance. Not sure currently why one would do this.

masonry.getOption( key )

getting an option on the instance.