simple-masonry-layout
v1.4.0
Published
Calculating masonry layouts based on rectangles, without being tied to the DOM.
Downloads
185
Readme
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 rectanglei
the current indexrectangles
all rectanglesoptions
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.