Methods

With Bricklayer, you can add new bricks (some elements with heights) using append and prepend. It also has redraw and destroy methods to manage Bricklayer's lifecycle.

---

append(element)

Adds new element to the bottom of the container. It finds the best place to put the element.

bricklayer.append(document.createElement('div'))

The argument have to be an HTMLElement instance.

var img = document.createElement('img')
img.src = "my-awesome-picture.jpg"
bricklayer.append(img)

You can append multiple items at once by giving an array of elements:

var image1 = document.getElementById("image1")
var image2 = document.getElementById("image2")

bricklayer.append([image1, image2])

---

prepend(element)

Adds new element to the top of the container. It finds the best place to put the element.

bricklayer.prepend(document.createElement('div'))

The argument have to be an HTMLElement instance.

var img = document.createElement('img')
img.src = "my-awesome-picture.jpg"
bricklayer.prepend(img)

You can append multiple items at once by giving an array of elements:

var image1 = document.getElementById("image1")
var image2 = document.getElementById("image2")

bricklayer.prepend([image1, image2])

---

destroy()

When you initialize bricklayer, it creates a ruler element (called bricklayer-column-sizer) and some column elements. This method destroys bricklayer and related auto-generated elements.

bricklayer.destroy()

To rebuild the Bricklayer for an element, you should rerun Bricklayer:

bricklayer = new Bricklayer(bricklayer.element)

---

redraw()

Redraws all columns. Column counts will be recalculated and it rebuilds columns with new element positions. It is not recommended to use. If you are building a plugin based on Bricklayer it would be useful.

bricklayer.redraw()

Note: Destroyed Bricklayer containers cannot be redrawn.