bower install --save angular-masonry
npm install --save angular-masonry
wu.masonry to your application's module dependencies.
Include dependencies in your HTML.
<!-- optional --><!-- /optional -->
See the homepage for a live example.
You have to include the
masonry attribute on the element holding the bricks.
The bricks are registered at the directive through the
The directive optionally uses
to determine when all images within the
masonry-brick have been loaded and adds
loaded CSS class to the element, so you can add custom styles and
prevent ghosting effects.
You can specify a different item
selector through the
item-selector attribute. You still need to use
masonry-brick either as class
name or element attribute on sub-elements in order to register it to the
column-width attribute allows you to override the the width of a column
of a horizontal grid. If
not set, Masonry will use the outer width of the first element.
This will be 200px wide max.
preserve-order attributes disables the
imagesLoaded logic and will
instead display bricks by the order in the DOM instead of by the time they are
loaded. Be aware that this can lead to visual glitches if the size of the
elements isn't set at the time they are inserted.
Allows usage of
imagesLoaded plugin. Defaults to
reload-on-show attribute triggers a reload when the masonry element (or an
ancestor element) is shown after being hidden, useful when using
ng-hide. Without this if the viewport is resized while the masonry element is
hidden it may not render properly when shown again.
showList changes from falsey to truthy
ctrl.reload will be called.
reload-on-resize attribute triggers a reload when the masonry element changes
its width, useful when only the parent element is resized (and not the window) and
you want the elements to be rearranged. Without this if the parent is resized then
some blank space may be left on the sides.
You can provide additional options
as expression either as
Bricks are appended by default. This behavior can be specified for each brick by
The directive is based on a StackOverflow question answered by James Sharp.
Please refer to CONTRIBUTING.md before opening issues or pull requests.