Homepage

An AngularJS directive to work with David Desandro's Masonry.

1. Install via either bower or npm: 1a. bower install --save angular-masonry 1b. npm install --save angular-masonry
2. Add wu.masonry to your application's module dependencies.
3. Include dependencies in your HTML.
4. Use the masonry directive.

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 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="