Love Bike, Burning Man 2014
Truth is Beauty, Burning Man 2013
Believe, Burning Man 2014
Truth is Beauty, Burning Man 2013
Embrace, Burning Man 2014

Refresh page to randomize; mouseover or touch images for more info. Photographs by Trey Ratcliff.

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 .

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 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.

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">
		<img src="love-bike.jpg" alt>
	<figure class="halvsies">
		<img src="burning-man-pyre.jpg" alt >

The interesting part of the 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) 
function fsort() {

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

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

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.