Responsive Cascading Grid Layout Plugin For jQuery - Bricklayer

Bricklayer is a lightweight jQuery layout plugin that lets you create a responsive, dynamic, fluid, cascading grid layout similar to the popular Masonry or Pinterest web layout. Also can be implemented in pure JavaScript without any 3rd dependencies.

Basic usage:

1. Load the required style sheet bricklayer.css in the head section of the webpage.

<link rel="stylesheet" href="bricklayer.css">

2. Add your grid items to the layout.

<div class="bricklayer">
  <!-- items here -->
</div>

3. Load the JavaScript bricklayer.js at the end of the document. Note that you have to place the bricklayer.js after jQuery library if you want to implement it as a jQuery plugin.

<script src="jquery.js"></script>
<script src="bricklayer.js"></script>

4. Initialize the grid layout.

// pure javascript 
var bricklayer = new Bricklayer(document.querySelector('.bricklayer'))

// jquery
var bricklayer = $("#bricklayer").bricklayer()

5. Public methods.

// pure javascript 
bricklayer.append(
  "<div>New Item</div>"
)

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

// jquery
bricklayer.data('bricklayer').append([
  "<div>New Item</div>"
])

6. Event listerners.

// "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
})

---

This awesome jQuery plugin is developed by ademilter. For more Advanced Usages, please check the demo page or visit the official website.