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.

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])

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])

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)

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.