The container attribute stores a reference to the container that this tessarray is acting upon.


tessarray.boxNodes is an array that contains the HTML nodes of tessarray's boxes. Tessarray finds the box nodes by searching within the container using the boxSelector.

If there is no given aspect ratio and there is no image inside the box to determine the aspect ratio, the box will be considered invalid and will not be added to tessarray.boxNodes or tessarray.boxObjects.


tessarray.boxObjects is an array of javascript objects that contain information about the boxNode they represent. There is a boxObject for each boxNode and they share the same index in their respective arrays.

Each boxObject has the following attributes:

index: Their index in the boxObjects array, also the index of the correlated boxNode in the boxNode array.

filters: An array of filter values that shows which filtrations the box will be rendered in.

sortData: A object that has sort strings as keys and the value of the box for that sort as the value.

boxNode: A reference to the correlated HTML element.

image: A reference to the image found within the box, if any.

aspectRatio: The given aspect ratio, or if not given, the calculated aspect ratio for the correlated boxNode.

activeFilter, activeSort, and activeOrder

tessarray.activeFilter, tessarray.activeSort, and tessarray.activeOrder show the current state of how tessarray is filtered, sorted, and ordered. tessarray.activeFilter and tessarray.activeSort will point to the string they are sorted on, while tessarray.activeOrder will be 1 or -1, representing an ascending or descending sort respectively.


tessarray.selectedBoxes determines which boxes are displayed and what order they appear. To apply custom sorting/filtering, change this attribute directly and then call tessarray.render() to see the results.

Go here for examples of selectedBoxes in use.


tessarray.layoutGeometry is the data returned from Flickr's Justified Layout library that determines where and with what dimensions each box should be rendred. layoutGeometry is created every time render is called.



Renders the boxes that belong to that Tessarray object. The content of the selectedBoxes determines which boxes are rendered and in what order. By default, Tessarray calls render when filtered/sorted and when the container size changes due to window resizing.

Call tessarray.render() to apply any changes made to tessarray.


tessarray.filterAndSort(filterString, sortString, order)

filterString is a string that Tessarray will use to filter boxes.

sortString is a string that Tessarraly will use to sort boxes.

order is a string that determines how to order the boxes.

Pass the value "" to any of these parameters to restore them to their default values. Pass false to filter or sort to keep the current filter/sort. If the sort parameter has a value other than false, the order will be set to ascending unless "descending" or "desc" is passed to the order parameter.

By default you cannot filter or sort by a value that you do not have a selector for. Check this example to see how you can do so.



filterString specifies the value used to filter the boxes. This string will have a value similar to that of the value of a data-filter attribute.

For examples of how filtering works, go here.


tessarray.sort(sortString, order)

sortstring is a string that Tessarray will use to sort boxes.

order is a string that determines how to order the boxes.

Order will switch to ascending every time sort is called if order is not given the value of "desc" or "descending".

For examples of how sorting works, go here.


tessarray.debounce(func, wait[, immediate])

func the function that you want to debounce (or prevent for firing)

wait integer, the amount of milliseconds the function should wait before allowing subsequent call.

immediate optional parameter, that if passed as a truthy value will cause the function to fire on the leading edge rather than trailing.

This is a basic javascript debounce function that prevents a function from being fired more than once every x miliseconds. This is needed for Tessarray when binding functions to the window's resize event to prevent calling functions such as render gratuitiously.

<input type="range" id="range-resize" value="75" min="0" max="75">
    <div id="container">
  <div class="box" style="background-color: red;" data-aspect-ratio="1.333"></div>
  <div class="box" style="background-color: orange;" data-aspect-ratio="1"></div>
  <div class="box" style="background-color: yellow;" data-aspect-ratio="1.6"></div>
  <div class="box" style="background-color: green;" data-aspect-ratio="1.33"></div>
  <div class="box" style="background-color: blue;" data-aspect-ratio=".75"></div>
  <div class="box" style="background-color: purple;" data-aspect-ratio="1.333"></div>
#range-resize {
  width: 75%;
  margin-left: calc(25% - 10px);
var tessarray = new Tessarray('#container', '.box');

var resizeWithRange = function() {
  var newWidth = parseInt(document.getElementById('range-resize').value) + 25;
  document.getElementById('container').style.width = newWidth.toString() + "%";

document.getElementById('range-resize').addEventListener('input', tessarray.debounce(resizeWithRange, 100));


tessarray.destroy()Destroys the Tessarray object. Leaves all elements on the page in the state that Tessarray last left them, and removes all tessarray functionality.

<button id="destroy-button">Destroy</button>
<button id="recreate-button">Recreate</button>
<button class="selector" data-sort="data-rainbow">Rainbow Order</button>
<button class="selector" data-sort="data-reverse-rainbow">Reverse Rainbow</button>
<div id="container">
  <div class="box rainbow reverse-rainbow" data-rainbow="1" data-reverse-rainbow="6" style="background-color: red;" data-aspect-ratio="1.333"></div>
  <div class="box rainbow reverse-rainbow" data-rainbow="2" data-reverse-rainbow="5" style="background-color: orange;" data-aspect-ratio="1"></div>
  <div class="box rainbow reverse-rainbow" data-rainbow="3" data-reverse-rainbow="4" style="background-color: yellow;" data-aspect-ratio="1.6"></div>
  <div class="box rainbow reverse-rainbow" data-rainbow="4" data-reverse-rainbow="3" style="background-color: green;" data-aspect-ratio="1.33"></div>
  <div class="box rainbow reverse-rainbow" data-rainbow="5" data-reverse-rainbow="2" style="background-color: blue;" data-aspect-ratio=".75"></div>
  <div class="box rainbow reverse-rainbow" data-rainbow="6" data-reverse-rainbow="1" style="background-color: purple;" data-aspect-ratio="1.333"></div>
var tessarray = new Tessarray("#container", ".box", {
  selectorClass: "selector"
document.getElementById("recreate-button").disabled = true;
document.getElementById("destroy-button").addEventListener("click", function() {
  if (tessarray) {
    this.disabled = true;
    document.getElementById("recreate-button").disabled = false;
document.getElementById("recreate-button").addEventListener("click", function() {
  tessarray = new Tessarray("#container", ".box", {
    selectorClass: "selector"
  this.disabled = true;
  document.getElementById("destroy-button").disabled = false;