JSFiddle - React, Tailwind, and code Playground

HTML

<div class="images">
    <img src="https://pp.vk.me/c540104/v540104129/c789/ue87WiduRQM.jpg" />
    <img src="https://pp.vk.me/c540104/v540104129/c792/z7yFhrYZVJ8.jpg" />
    <img src="https://pp.vk.me/c540104/v540104129/c792/z7yFhrYZVJ8.jpg" />
    <img src="https://pp.vk.me/c540104/v540104129/c792/z7yFhrYZVJ8.jpg" />
    <img src="https://pp.vk.me/c540104/v540104129/c792/z7yFhrYZVJ8.jpg" />
</div>

<div class="images">
    <img src="https://pp.vk.me/c540104/v540104129/c792/z7yFhrYZVJ8.jpg" />
    <img src="https://pp.vk.me/c540104/v540104129/c792/z7yFhrYZVJ8.jpg" />
    <img src="https://pp.vk.me/c540104/v540104129/c789/ue87WiduRQM.jpg" />
    <img src="https://pp.vk.me/c540104/v540104129/c792/z7yFhrYZVJ8.jpg" />
    <img src="https://pp.vk.me/c540104/v540104129/c792/z7yFhrYZVJ8.jpg" />
    <img src="https://pp.vk.me/c540104/v540104129/c789/ue87WiduRQM.jpg" />
    <img src="https://pp.vk.me/c540104/v540104129/c789/ue87WiduRQM.jpg" />
    <img src="https://pp.vk.me/c540104/v540104129/c789/ue87WiduRQM.jpg" />
</div>

CSS

.images {
    width: 340px;
    height: 400px;
    font-size: 0;
}

.images img {
    float: left;
}

JavaScript

(function($) {
    var PLUGIN_NAME = 'imageComposition';
    var DATA_KEY = PLUGIN_NAME;
    var CLASS_LOADING = 'image-compositing';
    var VER = 'ver';
    var HOR = 'hor';

    var methods = {
        init: function(hardPosition) {
            return this.each(function() {
                var position = (hardPosition == 'right') ? VER : (hardPosition == 'bottom' ? HOR : false);
                var $wrap = $(this);
                var $images = $wrap.find('img');
                var imagesNum = $images.length;
                var imagesSizes = [];
                var imagesPerColumn = 5;
                var $firstImage;
                var firstImageSize;
                var firstImageWidth;
                var firstImageHeight;
                var options = {};

                if (typeof hardPosition == 'object') {
                    options = $.extend({
                        width: $wrap.width(),
                        height: $wrap.height()
                    }, hardPosition);
                } else {
                    options = {
                        width: $wrap.width(),
                        height: $wrap.height()
                    }
                }

                var columns = [];
                var wrap = {
                    width: 0,
                    height: 0,
                    maxWidth: options.width,
                    maxHeight: options.height
                };

                if ($wrap.data(DATA_KEY) || !imagesNum) return;

                $wrap.data(DATA_KEY, true);
                $wrap.addClass(CLASS_LOADING);

                var loadedImages = 0;
                $images.each(function(i) {
                    var src = $(this).attr('src');
                    var img = new Image();
                    img.onload = function() {
                        imagesSizes[i] = [img.width, img.height];
                        loadedImages++;
                        if (loadedImages >= imagesNum) {
                          ...