Bricks.js

A blazing fast masonry layout generator for fixed width elements

Documentation on GitHub
@include("images/header/bricks.svg")

Problem

Current masonry solutions lack performance, and are bloated with unnecessary features. In addition, they:

  • Are built on dependencies, like jQuery
  • Mandate HTML markup, or require a CSS stylesheet
  • Position elements with transforms, making animation difficult

Solution

Bricks capitalizes on batched reading of layout properties for blazing fast packing time, no matter how many items. Besides performance, it features:

  • No required HTML markup or CSS stylesheet
  • Minimal, powerful, and readable configuration
  • Optional resize handling
  • Optimized handling of dynamically added items

Demo

Repack

Number of Bricks

Repack

Pack Time

100 ms