Easy to use implementation of the flickr justified layout.

Effortlessly create beautiful, justified grids with sorting, filtering and responsive sizing already baked in.

HTML
<div class="container" id="container">
  <div class="box" data-aspect-ratio="1.5">
    <img src="/assets/images/smaller-nasa/Optimized-nasa-1.jpg"/>
  </div>
  <div class="box" data-aspect-ratio="1.5">
    <img src="/assets/images/smaller-nasa/Optimized-nasa-2.jpg"/>
  </div>
  <div class="box" data-aspect-ratio="1.6">
    <img src="/assets/images/smaller-nasa/Optimized-nasa-3.jpg"/>
  </div>
  <div class="box" data-aspect-ratio="2.08">
    <img src="/assets/images/smaller-nasa/Optimized-nasa-4.jpg"/>
  </div>
  <div class="box" data-aspect-ratio="1.5">
    <img src="/assets/images/smaller-nasa/Optimized-nasa-5.jpg"/>
  </div>
  <div class="box" data-aspect-ratio="1.6">
    <img src="/assets/images/smaller-nasa/Optimized-nasa-6.jpg"/>
  </div>
  <div class="box" data-aspect-ratio="1.05">
    <img src="/assets/images/smaller-nasa/Optimized-nasa-7.jpg"/>
  </div>
  <div class="box" data-aspect-ratio="1.5">
    <img src="/assets/images/smaller-nasa/Optimized-nasa-8.jpg"/>
  </div>
</div>

CSS
.box {
  background-color: #eaeaea;
}
.box img {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 500ms linear 0ms;
}
.box.is-loaded img {
  opacity: 1;
}

JAVASCRIPT
var tessarray = new Tessarray("#container", ".box", {
  containerTransition: {
    duration: 500,
    timingFunction: "cubic-bezier(0.320, 1.385, 0.730, -0.470)",
    delay: 0
  }
});

See the code

Install

Download

JavaScript: - flickity.pkgd.min.js minified, or - flickity.pkgd.js un-minified

CDN

Link directly to Flickity files on unpkg.

<script src="https://unpkg.com/flickity@2.0/dist/flickity.pkgd.min.js"></script>
<script src="https://unpkg.com/flickity@2.0/dist/flickity.pkgd.js"></script>

Package Managers

Bower: bower install flickity --save

npm: npm install flickity --save

Getting Started

Tessarray uses boxes, HTML elements that will be rearranged and resized (while maintaining aspect ratio), and a container, an HTML element that contains the boxes.

var tessarray = new Tessarray(containerSelector, boxSelector[, options]);

The Tessarray constructor takes three arguments, a containerSelector string used to select the container, a boxSelector string used to select the boxes, and an optional options object.

If the boxes contain images, Tessarray will load the images and determine the aspect ratio. For faster loading or customized aspect ratios, you can pass them in with data attributes. Learn more at the Syle page.

HTML
<div id="container">
  <div class="box">
    <img src="https://source.unsplash.com/random/buildings"/>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/random/food"/>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/random/people"/>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/random/nature"/>
  </div>
</div>

CSS
img {
  width: 100%;
  height: 100%;
}

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