SOURCE

angular.module('App', [])

.controller('ImageLayout', ImageLayout)

function ImageLayout($scope, $http){
  $http.get('https://xieranmaya.github.io/images/cats/cats.json').success(function(imgs){
    $scope.imgs = imgs
  })
}

 <section>
    <div  ng-repeat="img in imgs" style="width:{{img.width*200/img.height}}px;flex-grow:{{img.width*200/img.height}}">
      <i style="padding-bottom:{{img.height/img.width*100}}%"></i>
      <img src="{{img.url}}" alt="">
    </div>
  </section>

section {
  display: flex;
  flex-wrap: wrap;
}
section::after {
content: '';
  flex-grow: 999999999;
}
div {
  margin: 2px;
  background-color: violet;
  position: relative;
}
i{
  display: block;
}
img {
  position: absolute;
  top: 0;
  width: 100%;
  vertical-align: bottom;
}