Using images with Shuffle

You can encounter problems when shuffle item dimensions depend on images. Like this demo. There are three good solutions to this.

Set an explicit height on .shuffle-items like the basic demo.
Similar to number 1, make the height of the image container a percentage of the width. If you know the aspect ratio of the images you're using, this is the technique you should use. This demo uses that technique.
Get notified when images load and call shuffleInstance.layout(). I recommend using Desandro's images loaded plugin to know when your images have finished loading.
Do nothing and let your shuffle instance call layout() on the window's load event. This will the item layout to change on page load.

A deep blue lake sits in the middle of vast hills covered with evergreen trees — Lake Walchen

Looking down over one of the pillars of the Golden Gate Bridge to the roadside and water below — Golden Gate Bridge

Crocodile

SpaceX launches a Falcon 9 rocket from Cape Canaveral Air Force Station — SpaceX

A multi-level highway stack interchange in Puxi, Shanghai — Crossroads

Dimly lit mountains give way to a starry night showing the Milky Way — Milky Way

A close up of a turtle underwater — Turtle

Many trees stand alonside a hill which overlooks a pedestrian path, next to the ocean at Stanley Park in Vancouver, Canada — Stanley Park

An intrigued cat sits in grass next to a flag planted in front of it with an astronaut space kitty sticker on beige fabric. — Astronaut Cat

Pier 14 at night, looking towards downtown San Francisco's brightly lit buildings — San Francisco

Looking down on central park and the surrounding builds from the Rockefellar Center — Central Park

Setup

Maintaining aspect ratios

With two elements, you can create a box which will scale with the page. Here's an example:

A 2:1 box

With this knowledge, you can force an image to fit inside this box and, when the image loads, it will not change the size of the box.

.aspect {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}

.aspect__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Add more aspect ratios here */
.aspect--16x9 {
  padding-bottom: 56.25%;
}

Markup for each item

The most important thing here is that the images are wrapped in two other elements which define its size. This means that the size of the <figure> does not depend on the image.

<figure class="js-item img-item col-3@sm col-3@xs">
  <div class="aspect aspect--16x9">
    <div class="aspect__inner">
      <img src="/img/tennis-ball.png" alt="3D render of a tennis ball">
    </div>
  </div>
  <figcaption>wallpaper, 3d</figcaption>
</figure>

JavaScript used for this demo

Link to demo source