Random Images With Flexbox & JavaScript

Human cognition is excited by small but distinct differences in experience, making randomized web page elements a simple and effective method for increasing user engagement on a site. It’s also an effect that is achieved very easily, with just a few lines of JavaScript.

We need to be a little careful when we use the term “random”, however. Random site content really comes at three distinct levels:

1. Randomly reordering content that is already on the page: probably the most limited option. If you have only three images, every combination will be shown to the user in a very short time.
2. You could use a server-side language to pull random content from a folder. It’s much easier to provide the appearance of randomness with this variation, since there’s usually a larger pool to work with.
3. Using MySQL or an API to pull random content from a database is the hardest to achieve, but also the most effective: databases will typically consist of hundreds to millions of entries, meaning high variety and unpredictable combinations. The feature banner you see at the top of this page is an example of that.

Randomizing Image Order

In this case I’m dealing with a series of five images. The layout and CSS is a combination of techniques that I’ve explored previously. The markup looks like this:

<div id=burningman>

<figure>

<img src="love-bike.jpg" alt>

</figure>

<figure class="halvsies">

<img src="burning-man-pyre.jpg" alt >

</figure>

…

</div>

The interesting part of the flexbox layout is that that some of the images are the same width but double the height of the others:

#burning-man { display: flex; flex-flow: row wrap; font-size: 0; }

#burning-man figure { 

flex: 1; margin: 0; 

min-width: 300px; position: relative; 

}

#burning-man figure img { 

width: 100%; height: auto;

opacity: 0; transition: .5s; 

}

#burning-man figure img.halvsies { 

flex: .5; min-width: 150px; 

}

#burning-man figure img.visible { opacity: 1; }

In this case full-size images have a flex value of 1 and a min-width of 300px; half-width images have properties with exactly half those values. Next week, I’ll show how to use this flexbox layout technique to create a fully automated image masonry layout.

The JavaScript consists of three functions – randomize(), sequentize() and makeVis() – together with an fsort() function that calls the first two.

function randomize() {

for (var i = rando.children.length; i >= 0; i--){ rando.appendChild(rando.children[Math.random() * i | 0]); 

}

}

function makeVis(j) {

var photo = rando.children[j].firstElementChild;

setTimeout(function() { photo.classList.add("visible"); }, 700 * j);

}

function sequentize(){

for (var j = 0; j <= rando.children.length; ++j) 

makeVis(j);

}

function fsort() {

randomize();

sequentize();

}

They are fed with and called by two lines of JavaScript:

var rando = document.getElementById('burningman');

fsort();

The randomize function, using a Yates shuffle variant suggested by Alexy Lebedev, rearranges the order of the <figure> elements. Note that the JavaScript reordering is entirely different from the flexbox order property: here we’re rearranging elements in the DOM.

sequentize(), coupled to the makeVis() function, presents the <figure> elements one at a time by applying the visible class to the images inside them, with the fade-in effect achieved through a transition.

Photographs by Trey Ratcliffe, licensed under Creative Commons. Play with this code on CodePen