{"id":13528011,"url":"https://github.com/passy/angular-masonry","last_synced_at":"2025-09-28T19:31:26.727Z","repository":{"id":9485343,"uuid":"11374131","full_name":"passy/angular-masonry","owner":"passy","description":"An AngularJS directive for Masonry.","archived":true,"fork":false,"pushed_at":"2017-05-17T15:42:06.000Z","size":1557,"stargazers_count":1117,"open_issues_count":54,"forks_count":220,"subscribers_count":41,"default_branch":"master","last_synced_at":"2024-05-11T01:15:17.097Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://passy.github.io/angular-masonry","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/passy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-07-12T17:24:47.000Z","updated_at":"2024-04-14T11:19:24.000Z","dependencies_parsed_at":"2022-09-06T23:30:29.032Z","dependency_job_id":null,"html_url":"https://github.com/passy/angular-masonry","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/passy%2Fangular-masonry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/passy%2Fangular-masonry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/passy%2Fangular-masonry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/passy%2Fangular-masonry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/passy","download_url":"https://codeload.github.com/passy/angular-masonry/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234555767,"owners_count":18851838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T06:02:09.996Z","updated_at":"2025-09-28T19:31:21.451Z","avatar_url":"https://github.com/passy.png","language":"CoffeeScript","funding_links":[],"categories":["Web 前端","CoffeeScript","Directive"],"sub_categories":[],"readme":"# AngularJS Masonry Directive [![Build Status](https://travis-ci.org/passy/angular-masonry.svg?branch=master)](https://travis-ci.org/passy/angular-masonry)[![Dependency Status](https://gemnasium.com/passy/angular-masonry.svg)](https://gemnasium.com/passy/angular-masonry) [![Code Climate](https://codeclimate.com/github/passy/angular-masonry/badges/gpa.svg)](https://codeclimate.com/github/passy/angular-masonry)\n\n[Homepage](https://passy.github.io/angular-masonry)\n\nAn [AngularJS 1](https://angularjs.org/) directive to work with David Desandro's [Masonry](http://masonry.desandro.com/).\n\n## Usage\n\n1. Install via either [bower](http://bower.io/) or [npm](https://www.npmjs.com/):\n    1. `bower install --save angular-masonry`\n    2. `npm install --save angular-masonry`\n2. Add `wu.masonry` to your application's module dependencies.\n3. Include dependencies in your HTML.\n      ```html\n      \u003cscript src=\"bower_components/ev-emitter/ev-emitter.js\"\u003e\u003c/script\u003e\n      \u003cscript src=\"bower_components/desandro-matches-selector/matches-selector.js\"\u003e\u003c/script\u003e\n      \u003cscript src=\"bower_components/fizzy-ui-utils/utils.js\"\u003e\u003c/script\u003e\n      \u003cscript src=\"bower_components/get-size/get-size.js\"\u003e\u003c/script\u003e\n      \u003cscript src=\"bower_components/outlayer/item.js\"\u003e\u003c/script\u003e\n      \u003cscript src=\"bower_components/outlayer/outlayer.js\"\u003e\u003c/script\u003e\n      \u003cscript src=\"bower_components/masonry/masonry.js\"\u003e\u003c/script\u003e\n\n      \u003c!-- optional --\u003e\n      \u003cscript src=\"bower_components/imagesloaded/imagesloaded.js\"\u003e\u003c/script\u003e\n      \u003c!-- /optional --\u003e\n\n      \u003cscript src=\"bower_components/angular/angular.js\"\u003e\u003c/script\u003e\n      \u003cscript src=\"bower_components/angular-masonry/angular-masonry.js\"\u003e\u003c/script\u003e\n      ```\n\n4. Use the `masonry` directive.\n\n## Example\n\nSee the [homepage](http://passy.github.io/angular-masonry) for a live example.\n\n```html\n\u003cdiv masonry load-images=\"true\"\u003e\n    \u003cdiv class=\"masonry-brick\" ng-repeat=\"brick in bricks\"\u003e\n        \u003cimg ng-src=\"{{ brick.src }}\" alt=\"A masonry brick\"\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nYou have to include the `masonry` attribute on the element holding the bricks.\nThe bricks are registered at the directive through the `masonry-brick` CSS\nclassname.\n\nThe directive optionally uses [`imagesloaded`](https://github.com/desandro/imagesloaded)\nto determine when all images within the `masonry-brick` have been loaded and adds\nthe `loaded` CSS class to the element, so you can add custom styles and\nprevent ghosting effects.\n\n## Attributes\n\n### `item-selector`\n\n(Default: `.masonry-brick`)\n\nYou can specify a different [item\nselector](http://masonry.desandro.com/options.html#itemselector) through the\n`item-selector` attribute. You still need to use `masonry-brick` either as class\nname or element attribute on sub-elements in order to register it to the\ndirective.\n\n*Example:*\n\n```html\n\u003cmasonry item-selector=\".mybrick\"\u003e\n    \u003cdiv masonry-brick class=\"mybrick\"\u003eUnicorns\u003c/div\u003e\n    \u003cdiv masonry-brick class=\"mybrick\"\u003eSparkles\u003c/div\u003e\n\u003c/masonry\u003e\n```\n\n### `column-width`\n\nThe `column-width` attribute allows you to override the [the width of a column\nof a horizontal grid](http://masonry.desandro.com/options.html#columnwidth). If\nnot set, Masonry will use the outer width of the first element.\n\n*Example:*\n\n```html\n\u003cmasonry column-width=\"200\"\u003e\n    \u003cdiv class=\"masonry-brick\"\u003eThis will be 200px wide max.\u003c/div\u003e\n\u003c/masonry\u003e\n```\n\n### `preserve-order`\n\nThe `preserve-order` attributes disables the `imagesLoaded` logic and will\ninstead display bricks by the order in the DOM instead of by the time they are\nloaded. Be aware that this can lead to visual glitches if the size of the\nelements isn't set at the time they are inserted.\n\n*Example:*\n\n```html\n\u003cmasonry preserve-order\u003e\n    \u003cdiv class=\"masonry-brick\"\u003e\u003cimg src=\"...\" alt=\"Will always be shown 1st\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"masonry-brick\"\u003e\u003cimg src=\"...\" alt=\"Will always be shown 2nd\"\u003e\u003c/div\u003e\n\u003c/masonry\u003e\n```\n\n### `load-images`\n\nAllows usage of `imagesLoaded` plugin. Defaults to `false`.\n\n*Example:*\n\n```html\n\u003cmasonry load-images=\"true\"\u003e\n    \u003cdiv class=\"masonry-brick\"\u003e\u003cimg src=\"/your/image_1.jpg\" alt=\"image\"/\u003e\u003c/div\u003e\n    \u003cdiv class=\"masonry-brick\"\u003e\u003cimg src=\"/your/image_2.jpg\" alt=\"image\"/\u003e\u003c/div\u003e\n\u003c/masonry\u003e\n```\n\n### `reload-on-show`\n\nThe `reload-on-show` attribute triggers a reload when the masonry element (or an\nancestor element) is shown after being hidden, useful when using `ng-show` or\n`ng-hide`. Without this if the viewport is resized while the masonry element is\nhidden it may not render properly when shown again.\n\n*Example:*\n\n```html\n\u003cmasonry reload-on-show ng-show=\"showList\"\u003e\n    \u003cdiv class=\"masonry-brick\"\u003e...\u003c/div\u003e\n    \u003cdiv class=\"masonry-brick\"\u003e...\u003c/div\u003e\n\u003c/masonry\u003e\n```\n\nWhen `showList` changes from falsey to truthy `ctrl.reload` will be called.\n\n\n### `reload-on-resize`\n\nThe `reload-on-resize` attribute triggers a reload when the masonry element changes\nits width, useful when only the parent element is resized (and not the window) and\nyou want the elements to be rearranged. Without this if the parent is resized then\nsome blank space may be left on the sides.\n\n*Example:*\n\n```html\n\u003cmasonry reload-on-resize\u003e\n    \u003cdiv class=\"masonry-brick\"\u003e...\u003c/div\u003e\n    \u003cdiv class=\"masonry-brick\"\u003e...\u003c/div\u003e\n\u003c/masonry\u003e\n```\n\n\n### `masonry-options`\n\nYou can provide [additional options](http://masonry.desandro.com/options.html)\nas expression either as `masonry` or `masonry-options` attribute.\n\n*Example:*\n\n```html\n\u003cmasonry masonry-options=\"{ transitionDuration: '0.4s' }\"\u003e\n\u003c/masonry\u003e\n```\n\nEquivalent to:\n\n```html\n\u003cdiv masonry=\"{ transitionDuration: '0.4s' }\"\u003e\n\u003c/div\u003e\n```\n\n### `prepend`\n\nBricks are appended by default. This behavior can be specified for each brick by\nproviding the `prepend` attribute.\n\n*Example:*\n\n```html\n\u003cdiv masonry\u003e\n    \u003cdiv class=\"masonry-brick\" prepend=\"isPrepended()\"\u003e...\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Credits\n\nThe directive is based on\n[a StackOverflow question](http://stackoverflow.com/questions/16504151/masonry-with-angularjs)\nanswered by James Sharp.\n\n\n## Contributing\n\nPlease refer to [CONTRIBUTING.md](CONTRIBUTING.md) before opening issues or pull\nrequests.\n\n## License\n\nMIT\n\n\n[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/passy/angular-masonry/trend.png)](https://bitdeli.com/free \"Bitdeli Badge\")\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpassy%2Fangular-masonry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpassy%2Fangular-masonry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpassy%2Fangular-masonry/lists"}