Angular 8中如何实现每行4张及以上卡片的虚拟滚动？

我明白你遇到的痛点了——CDK虚拟滚动默认是按单列列表项设计的，直接用*cdkVirtualFor渲染单张卡片的话，很难兼顾每行4张及以上的流式布局和虚拟滚动的性能优势。下面给你一套经过验证的可行方案：

核心思路 #

CDK虚拟滚动的itemSize参数是用来计算可见区域渲染范围的关键，我们需要把它从「单张卡片高度」改成「每行的高度」，再配合CSS Grid/Flexbox实现多行流式布局，这样就能同时满足自动换行和虚拟滚动的需求。

修改后的代码示例 #

HTML模板 #

<cdk-virtual-scroll-viewport itemSize="224" class="viewport">
  <!-- 用容器包裹卡片，实现网格布局 -->
  <div class="card-container" *cdkVirtualFor="let c of cards; templateCacheSize: 50">
    <div class="card">
      <img class="image" src="{{cdnAddress}}/{{set1Address}}/img/cards/{{c.cardCode}}.png">
    </div>
  </div>
</cdk-virtual-scroll-viewport>

CSS样式 #

/* 虚拟滚动视口：必须设置固定高度，让滚动生效 */
.viewport {
  height: calc(100vh - 80px); /* 根据你的页面布局调整高度 */
  width: 100%;
}

/* 卡片容器：用Grid实现自动换行的多行布局 */
.card-container {
  display: grid;
  /* 自动填充列，每行至少显示4张（200px是卡片宽度，16px是间距） */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px; /* 卡片之间的间距 */
  padding: 16px;
}

/* 单张卡片：固定高度，和itemSize匹配 */
.card {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片适配卡片容器 */
}

关键细节解释 #

1. itemSize的设置：这里我设为224px，等于「卡片高度(200px) + 上下间距(16px) + 容器内边距(8px)」，确保虚拟滚动能准确计算每行的高度，从而正确判断需要渲染的内容范围。
2. Grid布局的灵活性：repeat(auto-fill, minmax(200px, 1fr))会自动根据视口宽度调整列数——视口足够宽时每行显示4张以上，视口变窄时自动换行，完全符合你的需求。
3. 保持虚拟滚动性能：templateCacheSize: 50保留了足够的模板缓存，避免滚动时频繁销毁重建DOM，保证流畅度。

如果你更习惯用Flexbox，也可以把.card-container的样式改成这样：

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}

.card {
  flex: 1 1 calc(25% - 12px); /* 25%对应每行4张，减去间距影响 */
  min-width: 200px; /* 最小宽度，防止卡片过窄 */
  height: 200px;
}

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