Lightweight Masonry-like Grid Layout Library – Bricklayer

Preview:

Description:

Bricklayer is a JavaScript library for generating a responsive, dynamic, Masonry- and Pinterest-like cascading grid layout for your web project.

How to use it:

After downloading Bricklayer JavaScript library, just include the CSS and JS files right above the closing body tag:

<link rel="stylesheet" href="dist/bricklayer.css">
<script src="dist/bricklayer.js"></script>

Wrap the grid items into a container with the CSS class of ‘bricklayer’.

<section class="bricklayer">
  <!-- item here -->
</section>

Initialize the grid layout.

var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))

Append new item(s) to the grid layout.

bricklayer.append(
  "<div>New Item</div>"
)
bricklayer.prepend([
  "<div>New Item 1</div>",
  "<div>New Item 2</div>",
  "<div>New Item 3</div>"
])

API events.

// "itemElement" will be appended to the end of "columnElement"
bricklayer.on('beforeAppend', function (e) {
  var itemElement = e.detail.item
  var columnElement = e.detail.column
})
// "itemElement" will be prepended to the top of "columnElement"
bricklayer.on('beforePrepend', function (e) {
  var itemElement = e.detail.item
  var columnElement = e.detail.column
  
})
// "itemElement" is appended to the end of "columnElement"
bricklayer.on('afterAppend', function (e) {
  var itemElement = e.detail.item
  var columnElement = e.detail.column
})
// "itemElement" is prepended to the top of "columnElement"
bricklayer.on('afterPrepend', function (e) {
  var itemElement = e.detail.item
  var columnElement = e.detail.column
})
// In every breakpoint, this event will be fired with the count of columns
bricklayer.on('breakpoint', function (e) {
  var columnCount = e.detail.columnCount
})

Changelog:

08/16/2018

• Add type check for CustomEvent property