ng4-image-layout-like-googlephoto.ts

//new project

ng new gallery
cd gallery
ng g service imgData     // generate service
ng g c gallery           // generate gallery component

//copy images folder to src/assets


//in img-data.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class ImgDataService {

  constructor() { }


  
  imgs = [
  {
    "url": "1.jpg",
    "width": 4240,
    "height": 2832
  },
  {
    "url": "2.jpg",
    "width": 3500,
    "height": 2333
  },
  {
    "url": "3.jpg",
    "width": 5616,
    "height": 3266
  },
  {
    "url": "4.jpg",
    "width": 3456,
    "height": 5184
  },
  {
    "url": "5.jpg",
    "width": 5380,
    "height": 3648
  },
  {
    "url": "6.jpg",
    "width": 5341,
    "height": 3561
  },
  {
    "url": "7.jpg",
    "width": 3992,
    "height": 2242
  },
  {
    "url": "8.jpg",
    "width": 3529,
    "height": 4705
  },
  {
    "url": "9.jpg",
    "width": 1836,
    "height": 2448
  },
  {
    "url": "10.jpg",
    "width": 5426,
    "height": 3617
  },
  {
    "url": "11.jpg",
    "width": 3872,
    "height": 2592
  },
  {
    "url": "12.jpg",
    "width": 2448,
    "height": 1624
  },
  {
    "url": "13.jpg",
    "width": 3305,
    "height": 4957
  },
  {
    "url": "14.jpg",
    "width": 6000,
    "height": 4000
  },
  {
    "url": "15.jpg",
    "width": 4002,
    "height": 2668
  } 
]

  success(){return "Successful" ;}


}





//in app.module.ts
import { ImgDataService } from './img-data.service';

providers: [ImgDataService],




//in gallery.component.ts

import { ImgDataService } from './../img-data.service';
constructor(private newServices: ImgDataService) { }

  imgs;
  ngOnInit() {
      console.log(this.newServices.success());
      this.imgs = this.newServices.imgs;
  }


    public getDivWidthAndGrow(img_width, img_height){ 
      var result: Number;
      result = img_width * 200 / img_height  ;
      return result;
  } 


 public getPaddingBottom(img_width, img_height){ 
      var result: Number;
      result =  img_height / img_width * 100 ;
      return result;
  }
     

//in gallery.component.html
<p>
  gallery works!
</p>

 <section>
    <div *ngFor="let img of imgs" 
		 [ngStyle]="{'width':getDivWidthAndGrow(img.width, img.height) + 'px',
					'flex-grow':getDivWidthAndGrow(img.width, img.height) }" > 

 

        <i [ngStyle]="{'width':getPaddingBottom(img.width, img.height) + '%'}" ></i>
		<img src="../../assets/images/{{img.url}}" alt="">
    </div>  
 
  </section>
   
   
  // in gallery.component.css
   
   section {
  display: inline-flex;
  flex-wrap: wrap; 
}
section::after {
  content: '';
  flex-grow: 999999999;
}
div {
  margin: 2px;
  background-color: #CFD8DC;
  position: relative;
}
i{
  display: block;
}
img {
  position: relative;
  top: 0;
  width: 100%;
  vertical-align: bottom;
}