JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
<script src="https://rawgit.com/rvera/image-picker/5b6e2f5e0f71a445ac43f7c8ee1c454a6571a693/image-picker/image-picker.js"></script>
<select>
    <option data-img-src="http://tiny.cc/enhx6x">Image 1</option>
    <option data-img-src="http://tinyurl.com/hgruucy">Image 2</option>
</select>

CSS

p {margin:5px;}

JavaScript

$.fn.masonryImagesReveal = function( $items ) {
    var msnry = this.data('masonry');
    var itemSelector = msnry.options.itemSelector;
    $items.hide(); //items are initially hidden
    this.append( $items ); //append them to the container
    console.log('appending: ' + $items.length);
    $items.imagesLoaded().progress( function( imgLoad, image ) {
        var $item = $( image.img ).parents( itemSelector );
        $item.show();
        var p = $item.find('p');
        console.log(p.height() + "," + p.outerHeight(true));
        msnry.appended( $item );
    });
    return this;
};

//FIRST CONVERT THE 'SELECT' ELEMENT INTO IMAGE CONTAINERS
var sel = $('select');
sel.imagepicker({
    limit: 1,
    limit_reached: function(){alert('Only one image may be selected!')},
    hide_select: true,
    show_label: true
});

var container = sel.next('ul.thumbnails');
container.fadeIn();
container.width( 850 );

//DETATCH THE IMAGE CONTAINERS WE CREATED
var $items = container.find('li');
$items.detach();

//INITIALIZE MASONRY ON THE NOW EMPTY CONTAINER
container.masonry({
    itemSelector: 'li',
    columnWidth: 250,
});

//APPEND IMAGES TO THE MASONRY CONTAINER AS THEY FINISH LOADING
container.masonryImagesReveal( $items );