JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<img src="http://rs715.pbsrc.com/albums/ww152/rocknice0/1280_1024_nature_wallpaper_32107108.jpg~c200" alt="">
<img src="http://rs661.pbsrc.com/albums/uu332/ilovemooks/nature-1.jpg~c200" alt="">
<img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
<img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
<img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
<img src="http://www.nature.com/nature/journal/v493/n7432/images/493295a-i2.0.jpg" alt="">
<img src="http://rs210.pbsrc.com/albums/bb267/_if_/gif/nature/nature.gif~c200" alt="">
<img src="http://cordis.europa.eu/docs/news/images/2011-10/20111021-3.jpg" alt="">
<img src="http://rs786.pbsrc.com/albums/yy145/christianlover40/NATURE/NJH_zps46a26224.jpg~c200" alt="">
</div>
CSS
.wrapper {
position: relative;
margin: auto;
}
img {
height: 120px;
width: 120px;
margin: 5px;
display: inline-block;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-ms-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
JavaScript
var images = document.getElementsByTagName('img');
var wrapper = document.getElementsByClassName('wrapper')[0];
function buildGallery() {
for (var i = 0; i < images.length; i++) {
images[i].style.position = 'static';
images[i].style.top = images[i].offsetTop + 'px';
images[i].style.left = images[i].offsetLeft + 'px';
}
for (var i = 0; i < images.length; i++) {
images[i].style.position = 'absolute';
}
wrapper.style.width = '300px';
wrapper.style.height = '400px';
}
buildGallery();
window.onresize = function() {
buildGallery();
}