响应式对齐网格元素各部分高度的CSS/原生JS方案求助

如果图片必须展示完整、不能用固定宽高比，可通过JS动态计算每行各区域的最大高度并统一设置：

核心逻辑 #

1. 按offsetTop分组每行的卡片
2. 计算当前行中图片容器、标题、文本的最大高度
3. 将最大高度赋值给该行所有卡片的对应元素

代码实现 #

// 防抖函数，避免resize频繁触发
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

function alignCardSections() {
  const cards = document.querySelectorAll('.card');
  if (!cards.length) return;

  let currentRow = [];
  let lastTop = cards[0].offsetTop;

  // 分组每行卡片
  cards.forEach(card => {
    if (card.offsetTop !== lastTop) {
      processRow(currentRow);
      currentRow = [];
      lastTop = card.offsetTop;
    }
    currentRow.push(card);
  });
  processRow(currentRow);
}

function processRow(rowCards) {
  let maxImgHeight = 0;
  let maxTitleHeight = 0;
  let maxTextHeight = 0;

  // 统计当前行各区域最大高度
  rowCards.forEach(card => {
    const imgWrapper = card.querySelector('.card-image-wrapper');
    const title = card.querySelector('.card-title');
    const text = card.querySelector('.card-text');

    maxImgHeight = Math.max(maxImgHeight, imgWrapper.offsetHeight);
    maxTitleHeight = Math.max(maxTitleHeight, title.offsetHeight);
    maxTextHeight = Math.max(maxTextHeight, text.offsetHeight);
  });

  // 统一设置高度
  rowCards.forEach(card => {
    const imgWrapper = card.querySelector('.card-image-wrapper');
    const title = card.querySelector('.card-title');
    const text = card.querySelector('.card-text');

    imgWrapper.style.height = `${maxImgHeight}px`;
    title.style.minHeight = `${maxTitleHeight}px`;
    text.style.minHeight = `${maxTextHeight}px`;
  });
}

// 初始化+监听窗口变化
alignCardSections();
window.addEventListener('resize', debounce(alignCardSections, 100));

// 动态加载卡片后需手动调用alignCardSections()

注意事项 #

• 图片容器需设置overflow: hidden，避免图片超出容器
• 若有AJAX加载新卡片，加载完成后调用alignCardSections()即可

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