# Masonry layout for Angular

## Demo
http://crystalui.org/components/masonry-layout

## Installation

Install the npm package.

```sh
npm i ngx-masonry-layout
```

Import module:

```ts
import {MasonryLayoutModule} from 'ngx-masonry-layout';

@NgModule({
    imports: [MasonryLayoutModule]
})
```

## Usage
```ts
myImages = [
	{
		path: 'path_to_image',
		width: natural_width,
		height: natural_height
	}
];
```

```html
<masonry-layout 
	[max-height]="250"
	[gutter]="4" 
	[images]="myImages"
	(events)="handleMasonryLayoutEvents($event)"></masonry-layout>
```

## Properties

| name             | type                                | description                                                               |
|------------------|-------------------------------------|---------------------------------------------------------------------------|
| max-height       | number                              | Maximum row height.                                                       |
| gutter           | number                              | Adds space between item elements (it is recommended to use even numbers). |
| class-name       | string, { [key: string]: any; }     | Adds classes for each item. Supports the same syntax as ngClass.          |