Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
e2e v1.1.0 Nov 12, 2017
src Update the demo and types Aug 3, 2018
.angular-cli.json v1.1.0 Nov 12, 2017
.editorconfig v1.1.0 Nov 12, 2017
.gitignore v1.1.0 Nov 12, 2017
LICENSE Create LICENSE Nov 20, 2017
README.md Merging Aug 3, 2018
karma.conf.js v1.1.0 Nov 12, 2017
package.json v1.1.0 Nov 12, 2017
protractor.conf.js v1.1.0 Nov 12, 2017
tsconfig.json v1.1.0 Nov 12, 2017
tslint.json v1.1.0 Nov 12, 2017

README.md

Demo

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

Installation

Install the npm package.

npm i ngx-masonry-layout

Import module:

import { MasonryLayoutComponent } from 'ngx-masonry-layout/components';

@NgModule({
    declarations: [ MasonryLayoutComponent ]
})

Usage

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

<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 or array Adds classes for each item.

Sponsors

We use Browserstack for cross-browser testing.

<<<<<<< HEAD Browserstack

Browserstack

7f2c06b84d410cbc11952aeb9596cb1c5bb944ef