Как сделать красивую сортировку изображений в прямоугольнике?

Question

[Игорь Васильев]

Есть скрипт, который делает красивую плитку из изображений.
sapegin.github.io/jquery.mosaicflow
Их на самом деле много, но беда этих плиток в том что их жёстко глючит при адаптации. На мониторе компьютера и ноутбука всё работает хорошо, но как только дело касается телефона, с этим прямо беда. С какими-то отдельными объектами я могу работать через css3 @media, но это далеко не всё, в примере вы видите, что низ плитки изображений словно конец оборванно бумаги. Может кому-то это нравиться, но не мне.

ВОПРОС:
Как сделать вот такую адаптивную плитку:

Answer 1

[Михаил Захаров]

Это можно сделать на flex. Просто скопируй )

<div id="gallery">
	<img src="1.jpg" alt>
	<img src="2.jpg" alt>
	<img src="3.jpg" alt>
	…
</div>

И к этим блокам следующий css:

div#gallery {
	display: -ms-flexbox;
	-ms-flex-direction: column;
	-ms-flex-wrap: wrap;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 100vw;
	font-size: 0; 
}
div#gallery img { 
	width: 33.3%;
	transition: .8s opacity;
}