An AngularJS directive to work with David Desandro's Masonry.
bower install --save angular-masonry- Add
wu.masonryto your application's module dependencies. - Include dependencies in your HTML.
- Use the
masonrydirective.
See the homepage for a live example.
<div masonry>
<div class="masonry-brick" ng-repeat="brick in bricks">
<img ng-src="{{ brick.src }}" alt="A masonry brick">
</div>
</div>You have to include the masonry attribute on the element holding the bricks.
The bricks are registered at the directive through the masonry-brick CSS
classname.
The directive uses imagesloaded to
determine when all images within the masonry-brick have been loaded and adds
the loaded CSS class to to the element, so you can add custom styles and
prevent ghosting effects.
(Default: .masonry-brick)
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
directive.
Example:
<masonry item-selector=".mybrick">
<div masonry-brick class="mybrick">Unicorns</div>
<div masonry-brick class="mybrick">Sparkles</div>
</masonry>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.
Example:
<masonry column-width="200">
<div class="masonry-brick">This will be 200px wide max.</div>
</masonry>The 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.
Example:
<masonry preserve-order>
<div class="masonry-brick"><img src="..." alt="Will always be shown 1st"></div>
<div class="masonry-brick"><img src="..." alt="Will always be shown 2nd"></div>
</masonry>You can provide additional options
as expression either as masonry or masonry-options attribute.
Example:
<masonry masonry-options="{ transitionDuration: '0.4s' }">
</masonry>Equivalent to:
<div masonry="{ transitionDuration: '0.4s' }">
</div>The directive is based on a StackOverflow question answered by James Sharp.
Pull requests welcome. Only change files in src and don't bump any versions.
Please respect the code style in place. Follow the
AngularJS commit guidelines.
MIT
