JSFiddle - React, Tailwind, and code Playground

by ilyautkin

HTML

<h2>6 картинок</h2>
<div class="images">
  <img src="http://xsaxs.ru/wall/42/leto_tropinka_les_nebo_oblaka_prev.jpg" style="float:left;">
  <img src="http://wallpaperstock.net/wallpapers/thumbs/45910hd.jpg" style="float:left;">
  <img src="http://cache.desktopnexus.com/thumbseg/1067/1067704-bigthumbnail.jpg" style="float:left;">
  <img src="http://dl2.joxi.net/drive/0003/0430/205230/151117/5f12394beb.png" style="float:left;">
  <img src="http://ikartinka.com/image/cache/data/117/1394133224/13941332246-max-460.jpg" style="float:left;">
  <img src="http://dl1.joxi.net/drive/0003/0430/205230/151117/16f8222097.png" style="float:left;">
</div>
<h2>5 картинок</h2>
<div class="images">
  <img src="http://wallpaperstock.net/wallpapers/thumbs/45910hd.jpg" style="float:left;">
  <img src="http://cache.desktopnexus.com/thumbseg/1067/1067704-bigthumbnail.jpg" style="float:left;">
  <img src="http://dl2.joxi.net/drive/0003/0430/205230/151117/5f12394beb.png" style="float:left;">
  <img src="http://ikartinka.com/image/cache/data/117/1394133224/13941332246-max-460.jpg" style="float:left;">
    <img src="http://xsaxs.ru/wall/42/leto_tropinka_les_nebo_oblaka_prev.jpg" style="float:left;">
</div>
<h2>3 картинки</h2>
<div class="images">
  <img src="http://xsaxs.ru/wall/42/leto_tropinka_les_nebo_oblaka_prev.jpg" style="float:left;">
  <img src="http://wallpaperstock.net/wallpapers/thumbs/45910hd.jpg" style="float:left;">
  <img src="http://cache.desktopnexus.com/thumbseg/1067/1067704-bigthumbnail.jpg" style="float:left;">
</div>

CSS

.images {
    width: 620px;
    text-align: justify;
}

JavaScript

$('.images').each(function(){
    var images = $(this).find('img');
    var lineWidth = $(this).css('width').replace('px','') * 1 - 10;
    var lineLimit = images.length;
    if (images.length > 2) {
        lineLimit = Math.ceil(images.length / 2);
    }
    var firstLineLimit = images.length % lineLimit || lineLimit;
    var linesCount = Math.ceil(images.length / lineLimit);
    //console.log(linesCount);
    var limit, line, offset, minHeight, imgHeight, imgListWidth;
    for (var i = 0; i < linesCount; i++) {
        if (i == 0) {
            limit = firstLineLimit;
            offset = 0;
        } else {
            offset = offset + limit;
            limit = lineLimit;
        }
        line = [];
        for (var j = 0; j < limit; j++) {
            line.push(images[offset + j])
        }
        minHeight = 0;
        for (var k = 0; k < line.length; k++) {
            imgHeight = $(line[k]).css('height').replace('px','') * 1;
            if (!minHeight || minHeight > imgHeight) {
                minHeight = imgHeight;
            }
        }
        imgListWidth = 0;
        for (var k = 0; k < line.length; k++) {
            $(line[k]).css({'height':minHeight + 'px'});
            imgListWidth = imgListWidth + $(line[k]).css('width').replace('px','') * 1
        }
        minHeight = minHeight * lineWidth / imgListWidth;
        for (var k = 0; k < line.length; k++) {
            $(line[k]).css({'height':minHeight + 'px', 'float':'none'});
        }
        //console.log(imgListWidth);
    }
});