嘿，这个自适应图片画廊的需求我太熟了！要实现你说的「多行分布、按设定最大高度+屏幕尺寸调整、填满单行且间距固定」的效果，其实CSS Grid就能搞定基础版，要是追求更精准的行高控制，加几行JS就行，下面给你拆解具体实现：

核心思路先理清楚 #

• 每行图片根据容器宽度、设定的最大高度，自动适配尺寸，严格保持原比例
• 图片必须填满整行空间，同时图片间的间距固定不变
• 多行分布，每行高度尽量接近设定的最大值，不会超出

方案一：纯CSS快速实现（适合比例接近的图片） #

如果你的图片比例差异不大，纯CSS就能快速搞定，完全不需要JS：

1. HTML结构 #

<div class="image-gallery">
  <img src="img-1.jpg" alt="海边日落">
  <img src="img-2.jpg" alt="山间小路">
  <img src="img-3.jpg" alt="城市夜景">
  <!-- 更多图片按需添加 -->
</div>

2. CSS代码 #

.image-gallery {
  /* 用Grid布局自动换行 */
  display: grid;
  /* 自动填充列，最小宽度兜底防止图片太窄 */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  /* 设定最大行高，这里默认300px，你可以自己改 */
  grid-auto-rows: 300px;
  /* 图片间固定间距 */
  gap: 16px;
  /* 给容器加个内边距，避免贴边 */
  padding: 16px;
}

.image-gallery img {
  width: 100%;
  height: 100%;
  /* 保持图片比例，裁剪超出部分，不想裁剪可以换成contain */
  object-fit: cover;
  /* 可选：加个圆角美化 */
  border-radius: 4px;
}

这个方案的优点是简单粗暴，加载快，但缺点是每行高度固定，图片比例差异大时，可能会有明显的裁剪（不过object-fit: cover能保证比例不变，只是裁剪边缘）。

方案二：CSS + JS精准控制（适合比例差异大的图片） #

如果你的图片比例五花八门，想要严格控制每行高度不超过设定值，同时填满整行，那就要用JS来辅助计算布局了：

1. 调整后的HTML结构 #

<div class="image-gallery">
  <!-- JS会动态生成每行的容器和图片 -->
</div>

2. CSS基础样式 #

.image-gallery {
  padding: 16px;
}

.image-gallery .row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
}

.image-gallery img {
  object-fit: cover;
  border-radius: 4px;
  /* 禁止用户拖拽图片 */
  user-select: none;
}

3. JS核心逻辑 #

const gallery = document.querySelector('.image-gallery');
// 这里可以改成你需要的最大行高
const MAX_ROW_HEIGHT = 300;
// 图片间的固定间距
const GAP = 16;
// 你的图片列表，替换成实际的图片地址和描述
const IMAGE_LIST = [
  { src: 'img-1.jpg', alt: '海边日落' },
  { src: 'img-2.jpg', alt: '山间小路' },
  { src: 'img-3.jpg', alt: '城市夜景' },
  { src: 'img-4.jpg', alt: '森林溪流' },
  { src: 'img-5.jpg', alt: '沙漠星空' }
];

// 先加载所有图片，确保拿到真实的宽高比例
async function initGallery() {
  const imageElements = await loadImages();
  layoutGallery(imageElements);
  // 窗口大小变化时重新布局
  window.addEventListener('resize', () => layoutGallery(imageElements));
}

// 加载图片并返回元素数组
function loadImages() {
  return Promise.all(IMAGE_LIST.map(item => {
    return new Promise(resolve => {
      const img = new Image();
      img.src = item.src;
      img.alt = item.alt;
      img.onload = () => resolve({ img, ratio: img.naturalWidth / img.naturalHeight });
    });
  }));
}

// 核心布局逻辑
function layoutGallery(imageItems) {
  // 清空之前的布局
  gallery.innerHTML = '';
  const containerWidth = gallery.offsetWidth;
  let currentRow = [];
  let totalRatio = 0;

  imageItems.forEach(item => {
    currentRow.push(item);
    totalRatio += item.ratio;

    // 计算当前行如果放这些图，高度会是多少
    const calculatedHeight = (containerWidth - GAP * (currentRow.length - 1)) / totalRatio;

    // 如果计算出的高度小于设定的最大高度，说明当前行塞不下了，先渲染当前行，把最后一张移到下一行
    if (calculatedHeight < MAX_ROW_HEIGHT) {
      const lastItem = currentRow.pop();
      totalRatio -= lastItem.ratio;
      renderRow(currentRow);
      currentRow = [lastItem];
      totalRatio = lastItem.ratio;
    }
  });

  // 渲染最后一行剩余的图片
  if (currentRow.length > 0) {
    renderRow(currentRow);
  }
}

// 渲染单行图片
function renderRow(rowItems) {
  const containerWidth = gallery.offsetWidth;
  const totalRatio = rowItems.reduce((sum, item) => sum + item.ratio, 0);
  // 计算行高，不超过设定的最大值
  const rowHeight = Math.min(
    (containerWidth - GAP * (rowItems.length - 1)) / totalRatio,
    MAX_ROW_HEIGHT
  );

  const row = document.createElement('div');
  row.classList.add('row');

  rowItems.forEach(item => {
    item.img.style.width = `${rowHeight * item.ratio}px`;
    item.img.style.height = `${rowHeight}px`;
    row.appendChild(item.img);
  });

  gallery.appendChild(row);
}

// 启动画廊
initGallery();

这个方案的优点是能精准控制每行高度不超过设定值，同时保证每行完全填满容器空间，图片比例差异再大也能完美适配，缺点是需要一点点JS代码，但逻辑不算复杂。

一些小Tips #

• 如果不想裁剪图片，可以把object-fit: cover换成object-fit: contain，但图片周围可能会留空白，你可以给图片容器加个背景色来填充
• 可以把MAX_ROW_HEIGHT和GAP做成CSS变量，这样不用改JS就能调整参数
• 图片加载时可以加个占位骨架屏，提升用户体验

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