如何在Angular中实现类似Facebook帖子的图片网格布局？

你需要的效果示例如下：

可直接使用的Angular NPM包 #

目前有多个成熟的第三方包可以直接满足需求，不需要从零开发：

• ngx-image-gallery：内置支持单图全宽展示、多图自适应网格布局，可通过配置项showSingleImageFullWidth直接开启单图全尺寸模式，适配移动端和桌面端不同尺寸容器，还支持图片懒加载、点击放大等常用功能，符合Facebook帖子图片展示的交互逻辑。
• angular-responsive-images-grid：专门针对社交平台帖子图片场景开发的轻量包，默认对齐Facebook的图片展示规则：1张图占满容器宽度，2张图各占50%宽度等高，3张及以上自动按行排列分配宽高比，不需要额外写布局逻辑，引入后传入图片数组即可直接使用。

Flex布局手动实现方案 #

如果不想引入第三方依赖，用原生Flex布局几十行代码就能实现对应效果，逻辑如下：

1. Angular组件模板代码 #

<div class="image-grid" [ngClass]="{'single': images.length === 1, 'grid-2': images.length === 2, 'grid-3': images.length === 3, 'grid-more': images.length > 3}">
  <img *ngFor="let img of images" [src]="img.url" [alt]="img.alt" class="grid-item">
</div>

2. 样式代码 #

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 100%;
}

/* 单张图全宽展示 */
.image-grid.single .grid-item {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
}

/* 2张图平分宽度 */
.image-grid.grid-2 .grid-item {
  flex: 1 1 calc(50% - 1px);
  height: 250px;
  object-fit: cover;
}

/* 3张图第一张占满上行，后两张平分下行 */
.image-grid.grid-3 .grid-item:first-child {
  flex: 1 1 100%;
  height: 300px;
  object-fit: cover;
}
.image-grid.grid-3 .grid-item:not(:first-child) {
  flex: 1 1 calc(50% - 1px);
  height: 200px;
  object-fit: cover;
}

/* 3张以上每张占1/3宽度 */
.image-grid.grid-more .grid-item {
  flex: 1 1 calc(33.33% - 1px);
  height: 200px;
  object-fit: cover;
}

.grid-item {
  cursor: pointer;
  transition: opacity 0.2s;
}
.grid-item:hover {
  opacity: 0.9;
}

上面的实现完全对齐Facebook的展示规则，你可以根据自己的业务需求调整max-height、height和间隙值，兼容所有支持Flex布局的浏览器，不需要额外依赖。

内容的提问来源于stack exchange，提问作者shehan96