JSFiddle - React, Tailwind, and code Playground

by Anatol

HTML

<div id="photos">
  <img data-src="http://www.dummyimage.com/600x400/000/fff">
  <img data-src="http://www.dummyimage.com/400x600/f00/fff">
  <img data-src="http://www.dummyimage.com/500x350/0f0/fff">
  <img data-src="http://www.dummyimage.com/600x400/00f/fff">
  <img data-src="http://www.dummyimage.com/600x400/ff0/000">
  <img data-src="http://www.dummyimage.com/400x600/0ff/000">
  <img data-src="http://www.dummyimage.com/400x600/f0f/000">
</div>

CSS

body {
  background:silver;
}

#photos .grid {
  margin:-12%;
  float:left;
}

#photos .photo {
  border:12px solid white;
  visibility:hidden;
  box-shadow:0 0 8px 3px rgba(0,0,0, 0.2);
  -webkit-transform: rotate(0deg) scale(0.4);
}

JavaScript

$(function() {
  var imgSize=350;
  $('#photos>img').each(function() {
    var $this=$(this).addClass('photo');
    $this.attr('src', $this.attr('data-src'));
  }).load(function() {
    var $this=$(this), w=$this.width(), h=$this.height();
    console.log(w,h);
    if (h>w) {
      $this
        .height(imgSize).width(w/h*imgSize)
        .css('margin', '0 '+((imgSize-(w/h*imgSize))/2)+'px');
    } else {
      $this
        .width(imgSize).height(h/w*imgSize)
        .css('margin', ((imgSize-(h/w*imgSize))/2)+'px 0');
    }
    $this.parent().append(
      $('<div>').addClass('grid')
        //.width(imgSize+20).height(imgSize+20)
        .append($this)
    );
    $this.hide().css('visibility', 'visible').fadeIn(500);
  });
});