An AngularJS directive to work with David Desandro's Masonry.
bower install --save angular-masonry- 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>You can provide additional options
as expression either as masonry or masonry-options attribute.
Example:
<masonry masonry-options="{ transitionTransition: '0.4s' }">
</masonry>Equivalent to:
<div masonry="{ transitionTransition: '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.
MIT