Layout images like Flickr.

No absolute positioning, just floats, widths and heights.

Works with both wrapped and plain img tags.

Automatically re-layouts on image load and on resize (uses requestAnimationFrame to increase performance).

<div class="gallery">
	<!-- Plain images -->
	<img src="img/1.jpg" />
	<img src="img/2.jpg" />
	<!-- Wrapped images -->
	<div><img src="img/3.jpg" /></div>
	<a href="img/5.jpg"><img src="img/5.jpg" /></a>
</div>

new FlickrLayout( document.querySelector( '.gallery' ) );

new FlickrLayout( document.querySelector( '.gallery' ), {
	maxRowHeight: 500,
	gutter: 15,
} );

$( '.gallery' ).flickrLayout();

$( '.gallery' ).flickrLayout( {
	maxRowHeight: 500,
	gutter: 15,
} );

If you need it to work with older browsers, change the TypeScript target to es3 or es5 and provide polyfills for Object.assign and Array.from.