使用 CSS 製作圖片列表布局

<style>
    body{
      margin: 0;
      overflow-x: hidden;
    }
    .fav-list{
      display: flex;
      flex-wrap: wrap;
      margin: 2px;
    }
    /* .fav-list::after{
      content: '';
      flex-grow: 999999999;
      order: 999999999;
    } */
    .fav-list > div{
      margin: 2px;
      background-color: violet;
      position: relative;
    }
    .fav-list > div > i {
      display: block;
      background-color: lightblue;
      /* display: none; */
    }
    .fav-list > div > img {
      position: absolute;
      vertical-align: bottom;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .fav-list > .placeholder{
      flex-grow: 100;
      flex-basis: 240px;
      height: 0;
      margin: 0;
    }
  </style>
<div class="fav-list">
    <div
      ng-repeat="img in imgs"
      style="flex-grow:{{img.width*100/img.height}};flex-basis:{{img.width*240/img.height}}px;">
      <i style="padding-bottom:{{img.height/img.width*100}}%"></i>
      <img ng-src="{{img.url}}"/>
    </div>
    <div ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]" class="placeholder"></div>
  </div>