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">
        <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 insertionTemplate = $('.template').find('.image').html(),
    insertionTargetChildren = $('.main').find('.image'),
    insertionFrequency = 3;

var random;
var excludeNumA, excludeNumB;
for (var i = 0; i < insertionFrequency; i++) {
    random = Math.floor(Math.random() * insertionTargetChildren.length) + 0;
    
    if (random != excludeNumA && random != excludeNumB) {
 insertionTargetChildren.eq(random).append(insertionTemplate);
    }
    excludeNumA = random + 1;
    excludeNumB = random - 1;
}

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