AngularJS Masonry Directive

Homepage

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

Usage

1. Install via either bower or npm:

   1. bower install --save angular-masonry
   2. npm install --save angular-masonry

2. Add wu.masonry to your application's module dependencies.

3. Include dependencies in your HTML.

   <scriptsrc="bower_components/ev-emitter/ev-emitter.js"></script><scriptsrc="bower_components/desandro-matches-selector/matches-selector.js"></script><scriptsrc="bower_components/fizzy-ui-utils/utils.js"></script><scriptsrc="bower_components/get-size/get-size.js"></script><scriptsrc="bower_components/outlayer/item.js"></script><scriptsrc="bower_components/outlayer/outlayer.js"></script><scriptsrc="bower_components/masonry/masonry.js"></script><!-- optional --><scriptsrc="bower_components/imagesloaded/imagesloaded.js"></script><!-- /optional --><scriptsrc="bower_components/angular/angular.js"></script><scriptsrc="bower_components/angular-masonry/angular-masonry.js"></script>

4. Use the masonry directive.

Example

See the homepage for a live example.

<divmasonryload-images="true"><divclass="masonry-brick" ng-repeat="brick in bricks"><imgng-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 optionally 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.

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:

<masonryitem-selector=".mybrick"><divmasonry-brickclass="mybrick">Unicorns</div><divmasonry-brickclass="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:

<masonrycolumn-width="200"><divclass="masonry-brick">This will be 200px wide max.</div></masonry>

preserve-order

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:

<masonrypreserve-order><divclass="masonry-brick"><imgsrc="..." alt="Will always be shown 1st"></div><divclass="masonry-brick"><imgsrc="..." alt="Will always be shown 2nd"></div></masonry>

load-images

Allows usage of imagesLoaded plugin. Defaults to false.

Example:

<masonryload-images="true"><divclass="masonry-brick"><imgsrc="/your/image_1.jpg" alt="image"/></div><divclass="masonry-brick"><imgsrc="/your/image_2.jpg" alt="image"/></div></masonry>

reload-on-show

The reload-on-show attribute triggers a reload when the masonry element (or an ancestor element) is shown after being hidden, useful when using ng-show or ng-hide. Without this if the viewport is resized while the masonry element is hidden it may not render properly when shown again.

Example:

<masonryreload-on-showng-show="showList"><divclass="masonry-brick">...</div><divclass="masonry-brick">...</div></masonry>

When showList changes from falsey to truthy ctrl.reload will be called.

reload-on-resize

The 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.

Example:

<masonryreload-on-resize><divclass="masonry-brick">...</div><divclass="masonry-brick">...</div></masonry>

masonry-options

You can provide additional options as expression either as masonry or masonry-options attribute.

Example:

<masonrymasonry-options="{ transitionDuration: '0.4s' }"></masonry>

Equivalent to:

<divmasonry="{ transitionDuration: '0.4s' }"></div>

prepend

Bricks are appended by default. This behavior can be specified for each brick by providing the prepend attribute.

Example:

<divmasonry><divclass="masonry-brick" prepend="isPrepended()">...</div></div>

Credits

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

Contributing

Please refer to CONTRIBUTING.md before opening issues or pull requests.

License

MIT