Angular2+ realizes google photos effect

ts: 

this.service.postData('/site_cnt/get_pictures', data).subscribe({
next: res => {
this.imgList = res.result.data;
for (const img of this.imgList) {
img['flexGrow'] = img.info.width * 200 / img.info.height;
img['width'] = img['flexGrow'] + 'px';
img['bottom'] = img.info.height / img.info.width * 100 + '%';
}
this.pageInfo = res.result.pageinfo;
}
});

html: 

<section class="img_section">
<div class="img_div" *ngFor="let img of imgList" [ngStyle]="{'width': img.width,'flex-grow': img.flexGrow}" (click)="handlePreview(img.url, img.title)">
<i class="img_i" [ngStyle]="{'padding-bottom': img.bottom}"></i>
<img class="img_img" src="{
   
   {siteinfo.ucs + img.url}}" [title]="img.title">
</div>
</section>

css: 

.img_section {
display: flex;
flex-wrap: wrap;
}
.img_section::after {
content: '';
flex-grow: 999999999;
}
.img_div {
margin: 2px;
background-color: violet;
position: relative;
cursor: pointer;
}
.img_i{
display: block;
}
.img_img {
position: absolute;
top: 0;
width: 100%;
vertical-align: bottom;
}