Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/passy/angular-masonry
An AngularJS directive for Masonry.
https://github.com/passy/angular-masonry
Last synced: about 2 months ago
JSON representation
An AngularJS directive for Masonry.
- Host: GitHub
- URL: https://github.com/passy/angular-masonry
- Owner: passy
- License: mit
- Archived: true
- Created: 2013-07-12T17:24:47.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2017-05-17T15:42:06.000Z (over 7 years ago)
- Last Synced: 2024-05-11T01:15:17.097Z (6 months ago)
- Language: CoffeeScript
- Homepage: https://passy.github.io/angular-masonry
- Size: 1.48 MB
- Stars: 1,117
- Watchers: 41
- Forks: 220
- Open Issues: 54
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# AngularJS Masonry Directive [](https://travis-ci.org/passy/angular-masonry)[](https://gemnasium.com/passy/angular-masonry) [](https://codeclimate.com/github/passy/angular-masonry)
[Homepage](https://passy.github.io/angular-masonry)
An [AngularJS 1](https://angularjs.org/) directive to work with David Desandro's [Masonry](http://masonry.desandro.com/).
## Usage
1. Install via either [bower](http://bower.io/) or [npm](https://www.npmjs.com/):
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.
```html
```
4. Use the `masonry` directive.
## Example
See the [homepage](http://passy.github.io/angular-masonry) for a live example.
```html
![A masonry brick]()
```
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`](https://github.com/desandro/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](http://masonry.desandro.com/options.html#itemselector) 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:*
```html
Unicorns
Sparkles
```
### `column-width`
The `column-width` attribute allows you to override the [the width of a column
of a horizontal grid](http://masonry.desandro.com/options.html#columnwidth). If
not set, Masonry will use the outer width of the first element.
*Example:*
```html
This will be 200px wide max.
```
### `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:*
```html
```
### `load-images`
Allows usage of `imagesLoaded` plugin. Defaults to `false`.
*Example:*
```html
```
### `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:*
```html
...
...
```
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:*
```html
...
...
```
### `masonry-options`
You can provide [additional options](http://masonry.desandro.com/options.html)
as expression either as `masonry` or `masonry-options` attribute.
*Example:*
```html
```
Equivalent to:
```html
```
### `prepend`
Bricks are appended by default. This behavior can be specified for each brick by
providing the `prepend` attribute.
*Example:*
```html
...
```
## Credits
The directive is based on
[a StackOverflow question](http://stackoverflow.com/questions/16504151/masonry-with-angularjs)
answered by James Sharp.
## Contributing
Please refer to [CONTRIBUTING.md](CONTRIBUTING.md) before opening issues or pull
requests.
## License
MIT
[](https://bitdeli.com/free "Bitdeli Badge")