Getting started

Install

Creating the layout

SimpleMasonryLayout has one single function which is called getLayout, this function will return an object describing the layout.

1import { getLayout } from '@jchn/simple-masonry-layout'
2
3const sizes = [{ width: 150, height: 200 }, { width: 200, height: 150 }]
4
5const layout = getLayout(sizes, 800, 3, { gutter: 10 })

getLayout<T>(
  sizes: Size[],    // The input dimensions, oftentimes the width and height of an image
  width: number,    // The width of the grid
  columns: number,  // The number of columns
  options?: Options // More options
) => Layout<T>

type Layout<T> = {
  items: GridItem<T>[]
  height: number
}

type GridItem<T> = {
  rect: Rect
  data: T
}

type Size = { 
  width: number, 
  height: number 
}

type Rect = {
  x: number,
  y: number,
  width: number,
  height: number
}

type Options = {
  gutter: number,   // x and y gutter
  gutterX: number,  // x gutter
  gutterY: number,  // y gutter
  paddingY: number, // additional height added to rectangle
  collapsing: bool, // if the elements should collapse into each other
  centering: bool   // if the elements should be centered if there are less items then columns
}

Now it's up to you to translate this layout object to something on screen using the DOM or a Canvas or anything else:

6const container = document.querySelector(".container")
7
8container.style.height = `${layout.height}px`
9              
10layout.items.forEach({ rect } => {
11  const div = document.createElement('div')
12
13  div.style.cssText = `
14    position: absolute;
15    top: ${rect.x};
16    left: ${rect.y};
17    width: ${rect.width}px;
18    height: ${rect.height}px;
19    border: 1px solid;
20  `
21
22  document.body.appendChild(div)
23})