# simple-masonry-layout [![Build Status](https://travis-ci.org/jchn/simple-masonry-layout.svg?branch=master)](https://travis-ci.org/jchn/simple-masonry-layout)
Calculating masonry layouts based on rectangles, without being tied to the DOM.

## Installation

`npm install simple-masonry-layout`

## Getting started

###### Importing

es6
`import SimpleMasonry from 'simple-masonry-layout'`

es5
`var SimpleMasonry = require('simple-masonry-layout')`

###### Browser global

When including simple-masonry.js inside of a `<script>` tag, `SimpleMasonry` will be attached to the window object.

### Generating rectangles

SimpleMasonry only has a single public method: `generateRectangles(options)`

The only thing this method does is generate an array of rectangle objects which look like this:

  ```
    [{
      width: <number>,
      height: <number>,
      x: <number>,
      y: <number>
    }]
  ```

These rectangles will form your layout, it is up to you to render them on screen.

To do this `generateRectangles` will need you to give it an object with the following properties:

##### dimensions - Array

An array consisting of 'dimension' objects, which looks like this:

  ```
  [{
    width: <number>,
    height: <number>
  }]
  ```

The dimensions will be scaled proportionately so they'll fit inside of the columns.

##### columns - number (default: 3)

The number of columns you'd like to have.

##### width - number (default: 800)

The total width the layout should fill up.

##### gutter - number (default: 0)

The size of the gutters you'd like to have between elements.

##### gutterX - number (default: value of gutter)

The vertical gutter between elements.

##### gutterY - number (default: value of gutter)

The horizontal gutter between elements.

##### maxHeight - number (default: 0 - inactive)

The maximum height of each element.

##### collapsing - boolean (default: true)

If the rectangles should collapse into each other.

##### centering - boolean (default: false)

##### customize - function (default: (r) => r)

A function to customize the dimensions before they get positioned, simpleMasonry will map over this function.
It should return the rectangle.

It receives the following arguments:
  - `rectangle` the current rectangle
  - `i` the current index
  - `rectangles` all rectangles
  - `options` the original options object passed

If number of columns is greater than number of rectangles, center the rectangles horizontally.

## Code example

  ```
  import SimpleMasonry from 'simple-masonry-layout'

  // These values could come from anywhere, an api, measuring images in the browser etc.
  const dimensions = [{
    width: 500,
    height: 800
  }, {
    width: 900,
    height: 1000
  },
  ...
  ]

  const rectangles = SimpleMasonry.generateRectangles({
    dimensions,
    columns: 5,
    width: 1920,
    gutter: 20
  })

  // Now do something with the rectangles to render the layout
  ```

For a more detailed example please check out the examples directory.

## React component

If you'd like to use it with react, please check out [react-simple-masonry](https://github.com/awkward/react-simple-masonry).