JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<h2>Randomly insert <span>insertionTemplate</span> into <span>insertionTarget</span> N times (<span>insertionFrequency</span>)</h2>

<div class="template" style="display: none;">
    <div class="image cat">
        <img src="http://placekitten.com/75/150" />
    </div>
</div>
<div class="main">
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
span {
    font-family: Monospace;
    padding: 0 5px;
    color: #666;
    background: #eee;
}

JavaScript

// http://stackoverflow.com/questions/17238255/insert-a-div-in-a-random-location-in-a-list-of-divs

var target    = $('.main').find('.image'),
    frequency = 3,
    element   = $();

for (var i = 0; i < frequency; i++) {
    (function getElems() {
        element   = target.eq( Math.floor(Math.random() * target.length) );
        var next  = element.next(),
            prev  = element.prev(),
            all   = element.add(next, prev);
        
        if (element.hasClass('cat') || next.hasClass('cat') || prev.hasClass('cat')) getElems();
    }());
    
    var template  = $('.template div').clone(true);
    element.before(template);
}

$('.main').packery({
    itemSelector: '.image'
});