hekima / angular-masonry

An AngularJS directive for Masonry.

Angular Masonry Directive

Homepage

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

Usage

1. bower install --save angular-masonry
2. Include dependencies in your HTML.
3. Use the masonry directive.

Example

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.

Attributes

item-selector

(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>

column-width

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>

masonry-options

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>

Credits

The directive is based on a StackOverflow question answered by James Sharp.

Contributing

Pull requests welcome. Only change files in src and don't bump any versions. Please respect the code style in place.

License

MIT