angular-masonry

Overview

Homepage

Detected project type: Node.js / JavaScript.

This repository was migrated from upstream source github.com/shafiqalibhai/angular-masonry and is preserved here for archival, reference, or continued local development.

At a glance

• Default branch: master
• Visibility: public
• Size: 1.5 MB
• Created: 2026-04-27
• Last updated: 2026-04-27
• Stars / Forks / Open issues: 0 / 0 / 0
• License: MIT

Languages

Language	Bytes	Share
CoffeeScript	7,162 bytes	46.1%
HTML	5,561 bytes	35.8%
JavaScript	2,812 bytes	18.1%

Repository structure

• src/
• test/
• .gitignore (38 B)
• .jshintrc (370 B)
• .travis.yml (110 B)
• angular-masonry.js (5,505 B)
• angular-masonry.min.js (2,292 B)
• bower.json (573 B)
• CHANGELOG.md (5,800 B)
• Gruntfile.js (1,750 B)
• index.html (5,561 B)
• karma.conf.js (995 B)
• LICENSE (1,080 B)
• package.json (619 B)
• README.md (4,743 B)

Getting started

Clone the repository:

git clone https://forgejo.deployview.com/ssa/angular-masonry.git
cd angular-masonry

Installation

npm install
# or
yarn install
# or
pnpm install

Usage

Run scripts defined in package.json:

npm start    # or whatever script your project defines
npm test

Original README

The content below is preserved from the previous README. Headings have been demoted so they don't compete with the new top-level sections.

AngularJS Masonry Directive

Homepage

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

Usage

1. bower 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.

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

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:

<masonry preserve-order>
    <div class="masonry-brick"><img src="..." alt="Will always be shown 1st"></div>
    <div class="masonry-brick"><img src="..." alt="Will always be shown 2nd"></div>
</masonry>

load-images

This attribute defaults to true and allows to disable the use of imagesLoaded altogether, so you don't have to include the dependency if your masonry layout doesn't actually make use of images.

Example:

<masonry load-images="false">
    <div class="masonry-brick"><p>Only text.</p></div>
    <div class="masonry-brick"><p>And nothing but text.</p></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:

<masonry reload-on-show ng-show="showList">
    <div class="masonry-brick">...</div>
    <div class="masonry-brick">...</div>
</masonry>

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

masonry-options

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

Example:

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

Equivalent to:

<div masonry="{ transitionDuration: '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. Follow the AngularJS commit guidelines.

License

MIT

Contributing

Contributions are welcome. The typical workflow is:

1. Open an issue describing the change you'd like to make.
2. Fork the repository (or create a feature branch if you have write access).
3. Commit your changes with clear, descriptive messages.
4. Open a pull request against the master branch.

Please follow the existing code style and include tests or reproduction steps where relevant.

License

This project is licensed under the MIT license. See the LICENSE file for the full text.

Repository

• Browse: https://forgejo.deployview.com/ssa/angular-masonry
• Clone (HTTPS): https://forgejo.deployview.com/ssa/angular-masonry.git
• Clone (SSH): ssh://git@forgejo.deployview.com:30143/ssa/angular-masonry.git
• Upstream / origin: github.com/shafiqalibhai/angular-masonry

---

This README was generated automatically based on repository metadata, contents, and any prior README content. Edit any section above to add project-specific detail.