Style

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 necessary if there is no element 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 <div>s, the layout will be ready the images have loaded. You can make placeholders for the images by giving the boxes a background-color.

Images can be faded in over the placeholders as they load. Apply opacity: 0 and an opacity transition to the images. Utilize the boxIsLoaded class hook (default value of "is-loaded") to add opacity to the image.

<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 flickr options' targetRowHeight has a default value of 300, meaning the justified layout will attempt to set each row to have a height around 300 pixels. On small screens this will lead to stacked images with 300 height. The example below changes the targetRowHeight and boxSpacing flickr options 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));

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.

<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="https://media.giphy.com/media/GV3aYiEP8qbao/source.gif"/>
  </div>
</div>

.image {
  width: 100%;
  height: 100%;
}

var tessarray = new Tessarray('#container', '.box');