JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script id="cat-template" type="text/template">
    <div class="image">
        <img src="http://placekitten.com/75/150" />
    </div>
</script>
<script id="img-template" type="text/template">
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
</script>
<div class="main">
</div>

JavaScript

var catTemplate = $("#cat-template").html();
var imgTemplate = $("#img-template").html();

//place images into .main
var $main = $(".main");
var numImages = 50;
for (var i = 0; i<numImages; i++){
    $main.append($(imgTemplate));
}

//make a list of cat images for example
var numCatImages = 50;
var cats = [];
for (i = 0; i < numCatImages; i++){
    cats.push($(catTemplate));
}

//shuffle the cat list so they appear in random order
cats = _.shuffle(cats);

//create a list of insertion points
var insertionPoints = [];
var insertionIndex = 0;
var minSpacing = 2;
var maxSpacing = 8;
var spacingRange = maxSpacing - minSpacing;
while(insertionIndex < numImages){
    insertionIndex += Math.floor(Math.random() * spacingRange) + minSpacing;
    insertionPoints.push(insertionIndex);
}

//place cat images at the insertion points
//it's important to start from the end and work your way forward so the previous insertions don't mess with subsequent insertion points
//so we reverse the array of insertion points

insertionPoints = insertionPoints.reverse();
var catIndex = 0;
_.each(insertionPoints, function(insertionIndex, i){
    $main.children().eq(insertionIndex).after(cats[catIndex++]);
});