Including dimensions

If you know the desired aspect ratio (or height and width) of the boxes, include it as a data attribute of the box.

<div class="box" data-aspect-ratio="1.6">
<!-- or -->
<div class="box" data-width="1440" data-height="900">

This allows the layout to render before images are loaded, and allows images to appear as they are loaded.

This is mandatory if there is no image inside the box, as Tessarray won't know what dimensions the box should be.

<div id="container">
  <div class="box" data-width="720" data-height="1080" >
    <img class="image" src="https://source.unsplash.com/category/nature/720x1080"/>
  </div>
  <div class="box" data-width="1600" data-height="900">
    <img class="image" src="https://source.unsplash.com/category/people/1600x900"/>
  </div>
  <div class="box" data-width="900" data-height="900">
    <img class="image" src="https://source.unsplash.com/category/nature/900x900"/>
  </div>
  <div class="box" data-aspect-ratio="1.333333">
    <img class="image" src="https://source.unsplash.com/category/nature/800x600"/>
  </div>
  <div class="box" data-aspect-ratio="1">
    <img class="image" src="https://source.unsplash.com/category/buildings/600x600"/>
  </div>
  <div class="box" data-aspect-ratio="0.675">
    <img class="image" src="https://source.unsplash.com/category/buildings/1080x1600"/>
  </div>
</div>
var tessarray1 = new Tessarray('#container', '.box');
.image {
  width: 100%;
  height: 100%;
}

Placeholders

If aspect ratios are included on the divs, the layout will probably be ready before the first image. You can make placeholders for the images by giving the boxes a background-color.

You can have the images fade in over the placeholder by setting the original image opacity to 0, adding an opacity transition, and utilizing the default boxIsLoaded class "is-loaded" to add opacity.

<div id="container">
  <div class="box" style="background-color: rgb(43, 44, 61)" data-aspect-ratio="1.5">
    <img class="image" src="./images/nasa-1.jpg"/>
  </div>
  <div class="box" style="background-color: rgb(74, 93, 114)" data-aspect-ratio="1.5">
    <img class="image" src="./images/nasa-2.jpg"/>
  </div>
  <div class="box" style="background-color: rgb(139, 98, 69)" data-aspect-ratio="1.6">
    <img class="image" src="./images/nasa-3.jpg"/>
  </div>
  <div class="box" style="background-color: rgb(123, 85, 51)" data-aspect-ratio="2.08">
    <img class="image" src="./images/nasa-4.jpg"/>
  </div>
  <div class="box" style="background-color: rgb(146, 205, 195)" data-aspect-ratio="1.5">
    <img class="image" src="./images/nasa-5.jpg"/>
  </div>
  <div class="box" style="background-color: rgb(116, 119, 119)" data-aspect-ratio="1.6">
    <img class="image" src="./images/nasa-6.jpg"/>
  </div>
</div>
.image {
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1500ms linear 0ms;
}
.box.is-loaded .image {
  opacity: 1;
}
var tessarray = new Tessarray('#container', '.box');

Responsive Target Height

The targetRowHeight option in the flickr is by default 300, meaning flickr's justified layout will attempt to set each row to have a height around 300 pixels. On smaller screens this will lead to stacked images with 300 height. The example below changes the targetRowHeight option depending on width of the browser.

<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>
</div>
var getHeightAndSpacing = function() {
  var targetRowHeight, boxSpacing;
  var viewWidth = document.body.clientWidth;
  if (viewWidth <= 640) {
    targetRowHeight = viewWidth * 0.30;
    boxSpacing = 8;
  } else if (viewWidth <= 768) {
    targetRowHeight = viewWidth * 0.27;
    boxSpacing = 12;
  } else {
    targetRowHeight = viewWidth * 0.20;
    boxSpacing = 16;
  }
  return {
    targetRowHeight: targetRowHeight,
    boxSpacing: boxSpacing
  };
};
var tessarray = new Tessarray('#container', '.box', {
  flickr: getHeightAndSpacing()
});
var responsiveResize = function() {
  var heightAndSpacing = getHeightAndSpacing();
  if (heightAndSpacing.targetRowHeight !== tessarray.options.flickr.targetRowHeight) {
    tessarray.options.flickr.targetRowHeight = heightAndSpacing.targetRowHeight;
    if (heightAndSpacing.boxSpacing !== tessarray.options.flickr.boxSpacing) {
      tessarray.options.flickr.boxSpacing = heightAndSpacing.boxSpacing;
    }
    tessarray.render();
  }
};
window.addEventListener("resize", tessarray.debounce(responsiveResize, 100));

The responsiveResize function is bound to the window's resize event using a debounce method. To learn more about debounce, go here

Non Image Boxes

Tessarray works with all types of elements, you just need to include data-aspect-ratio or data-height and data-width on each box element.

Note: we should include more types of elements right? SVG, embed, text, divs?

<div id="container">
  <div class="box" data-width="480" data-height="359">
    <img class="image" src="https://media.giphy.com/media/kiLq8SSDcewve/giphy.gif" />
  </div>
  <div class="box" data-width="480" data-height="258">
    <img class="image" src="https://media.giphy.com/media/l2JhvFnTJCqAEZPQ4/source.gif" />
  </div>
  <div class="box" data-width="480" data-height="217">
    <img class="image" src="https://media.giphy.com/media/99WhvcE6E3gNW/giphy.gif" />
  </div>
  <div class="box" data-width="480" data-height="226">
    <img class="image" src="https://media.giphy.com/media/l0MYMo35U6456VAXK/giphy.gif"/>
  </div>
  <div class="box" data-width="480" data-height="233">
    <img class="image" src="https://media.giphy.com/media/RDbZGZ3O0UmL6/giphy.gif"/>
  </div>
  <div class="box" data-width="480" data-height="270">
    <image class="image" src="http://i.giphy.com/l0HlI0AnS8PeRrYzu.gif" />
  </div>
</div>
.image {
  width: 100%;
  height: 100%;
}
var tessarray = new Tessarray('#container', '.box');