This is a simple grid layout class built with CoffeeScript. See the demo at recurving.github.io/grid.
Elements arranged by column
Elements are arranged vertically first and horizontally second to avoid empty spaces. It favors keeping the same gap and overall width over individual images having the same width (no worries, they would differ by one pixel at most).
Elements arranged by row or row without orphans
Elements are arranged by rows while keeping a maximum height. If there is an overflow the overall height of the row is decreased to keep the overall width and gap between images. Selecting the option to avoid orphans means that every row should have elements filling up the whole width (in typography an orphan is a word, part of a word, or very short line that appears by itself at the end of a paragraph). The algorithm user for the linear partitioning is adapted from this one – contrary to other solutions the partitioning is only used if there are widows. Especially for smaller widths this is not even needed.
The HTML elements should have these attributes:
<div class="grid" data-gap="4" data-maximum-column-width="256" data-maximum-row-height="192" data-display-style="rows"> <ul> <li> <div class="asset" data-ratio="0.67" style="padding-bottom: 149.33%;"> <img src="asset_1.jpg"> </div> </li> <li> <div class="asset" data-ratio="1.53" style="padding-bottom: 65.33%;"> <img src="asset_2.jpg"> </div> </li> <li> <div class="asset" data-ratio="1.50" style="padding-bottom: 66.67%;"> <img src="asset_3.jpg"> </div> </li> </ul> </div>
data-ratio is calculated by dividing the width by the height of the image (a photo with the size 400×200 has a ratio of 2),
padding-bottom is 100 times the height divided by the width in percent (a photo with the size 400×200 has the value 50%).
There is no need to call the script, just add the class
grid and (optionally) change the following attributes:
data-gapthe gap between the images
data-maximum-column-widththe maximum width of the invidual images
data-maximum-row-heightthe maximum height of the invidual images
data-display-stylethe display style, can be