如何实现类似Facebook、LinkedIn的多图网格布局 超量时显示加号图标

实现该布局可通过CSS Grid网格布局+简单JS计数逻辑完成，核心包含自适应不同图片数量的网格规则、超阈值计数遮罩两部分，具体实现如下：

核心规则约定 #

• 默认阈值设为4，即最多展示4张图片，超出部分在最后一个展示位标注剩余数量
• 可根据业务需求调整阈值，比如3张、9张均可通过修改CSS网格规则适配

基础CSS代码 #

/* 网格容器通用样式 */
.image-grid {
  display: grid;
  gap: 4px;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1 / 1;
}
/* 单张图样式 */
.image-grid.count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
/* 两张图样式：左右等分 */
.image-grid.count-2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}
/* 三张图样式：左图占满高度，右图上下两个 */
.image-grid.count-3 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.image-grid.count-3 .grid-item:first-child {
  grid-row: 1 / 3;
}
/* 四张图样式：2*2等分网格 */
.image-grid.count-4, .image-grid.count-extra {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
/* 超出4张时隐藏多余图片节点 */
.image-grid.count-extra .grid-item:nth-child(n+5) {
  display: none;
}
/* 图片项通用样式 */
.grid-item {
  position: relative;
  overflow: hidden;
}
.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 剩余数量遮罩样式 */
.grid-item.count-mask::after {
  content: attr(data-remain);
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML结构示例（以6张图场景为例） #

<div class="image-grid count-extra count-6">
  <div class="grid-item">
    <img src="xxx1.jpg" alt="配图">
  </div>
  <div class="grid-item">
    <img src="xxx2.jpg" alt="配图">
  </div>
  <div class="grid-item">
    <img src="xxx3.jpg" alt="配图">
  </div>
  <div class="grid-item count-mask" data-remain="+2">
    <img src="xxx4.jpg" alt="配图">
  </div>
  <!-- 超出4张的隐藏节点 -->
  <div class="grid-item">
    <img src="xxx5.jpg" alt="配图">
  </div>
  <div class="grid-item">
    <img src="xxx6.jpg" alt="配图">
  </div>
</div>

JS计数逻辑（简化版） #

function initImageGrid(container) {
  const items = container.querySelectorAll('.grid-item')
  const total = items.length
  const threshold = 4 // 可自定义阈值
  container.classList.add(`count-${total}`)
  if (total > threshold) {
    container.classList.add('count-extra')
    // 给第4个项添加计数遮罩
    const maskItem = items[threshold - 1]
    maskItem.classList.add('count-mask')
    maskItem.dataset.remain = `+${total - threshold}`
  }
}

注意事项 #

• 阈值可根据业务需求自定义，比如调整为9时，把网格规则改成3*3布局即可
• 如需兼容不支持aspect-ratio的旧浏览器，可将容器的固定宽高比实现替换为padding-top百分比方案

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