如何控制div子元素的垂直间距？附缩略图列表适配需求

我来帮你搞定这个需求！既要让垂直排列的缩略图随窗口缩放，又要保持固定数量的最大尺寸缩略图，还要维持恒定的垂直间距，咱们一步步来实现：

1. 先搭好基础HTML结构 #

首先创建父容器和缩略图子元素的结构，确保后续样式和JS能精准定位：

<div class="thumb-container">
  <div class="thumb-item"><img src="your-image-1.jpg" alt="缩略图1"></div>
  <div class="thumb-item"><img src="your-image-2.jpg" alt="缩略图2"></div>
  <div class="thumb-item"><img src="your-image-3.jpg" alt="缩略图3"></div>
  <!-- 按需添加更多缩略图 -->
</div>

2. 基础CSS配置打底 #

先给容器和缩略图设置基础样式，确保图片能自适应比例，同时为JS动态调整预留空间：

.thumb-container {
  height: 100vh; /* 容器占满可视高度 */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0; /* 初始间距设为0，后续由JS动态计算 */
  overflow-y: auto; /* 缩略图过多时允许垂直滚动 */
}

.thumb-item {
  width: 100%;
  flex-shrink: 0; /* 禁止缩略图被压缩，保证计算尺寸准确 */
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

3. JavaScript核心逻辑（实现自适应+恒定间距） #

这部分是关键！我们要在窗口 resize 时，重新计算缩略图尺寸和垂直间距，保证可视区域内显示固定数量的最大尺寸缩略图，同时维持间距恒定：

// 可自定义配置：可视区域内要显示的缩略图数量
const VISIBLE_THUMBS_COUNT = 4;
// 垂直间距总高度的系数（比如0.02代表占可视高度的2%，可按需调整）
const GAP_COEFFICIENT = 0.02;

function calculateThumbSizes() {
  const container = document.querySelector('.thumb-container');
  const thumbItems = document.querySelectorAll('.thumb-item');
  if (!container || thumbItems.length === 0) return;

  // 获取容器的可视高度
  const containerHeight = container.clientHeight;
  // 计算所有垂直间距的总高度：可视高度 × 设定系数
  const totalGapHeight = containerHeight * GAP_COEFFICIENT;
  // 计算单张缩略图的可用高度：(可视高度 - 总间距) / 显示数量
  const thumbHeight = (containerHeight - totalGapHeight) / VISIBLE_THUMBS_COUNT;
  // 计算单元素间距：总间距 / (显示数量 - 1) （n个元素有n-1个间隔）
  const singleGap = totalGapHeight / (VISIBLE_THUMBS_COUNT - 1);

  // 给每个缩略图设置计算好的高度
  thumbItems.forEach(item => {
    item.style.height = `${thumbHeight}px`;
  });
  // 给父容器设置flex gap，实现恒定的垂直间距
  container.style.gap = `${singleGap}px`;
}

// 页面加载时先执行一次计算
window.addEventListener('load', calculateThumbSizes);
// 窗口尺寸变化时重新计算
window.addEventListener('resize', calculateThumbSizes);

4. 关键细节说明 #

• 固定数量的最大尺寸：通过把容器高度减去总间距后平均分配，确保指定数量的缩略图刚好填满可视区域，且是当前窗口下的最大可能尺寸。
• 恒定垂直间距：用可视高度的比例计算总间距，再平均分配到元素之间，不管窗口怎么缩放，间距的视觉比例始终保持一致；如果想要固定像素间距，直接把totalGapHeight设为固定值（比如80px）即可。
• vw/vh适配：容器用100vh基于可视高度计算，配合JS动态调整，完美适配窗口缩放需求。

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