固定高度、宽度随图片自适应的Masonry画廊布局实现咨询

核心逻辑拆解 #

目标网站的布局并非传统错落式Masonry，而是固定行高+按图片宽高比动态适配宽度的流式画廊：所有图片项高度统一，宽度根据图片原始宽高比自动计算，从而填充整行空间，保证视觉上的规整性。

具体实现步骤 #

1. HTML结构 #

沿用你提供的结构，可通过数据属性存储图片宽高比（替代原示例的Horizontal/Vertical类，更灵活）：

<div class="infinite-scroll-component">
  <div class="custom-gallery">
    <!-- 宽高比1.5（3:2的横向图） -->
    <div class="image-item pie-menu-main-div" data-aspect="1.5">
      <img class="w-100" src="https://d3nn873nee648n.cloudfront.net/900x600/14201/120-SM520435.jpg" alt="SM520435" loading="lazy">
    </div>
    <!-- 宽高比0.666（2:3的纵向图） -->
    <div class="image-item pie-menu-main-div" data-aspect="0.666">
      <img class="w-100" src="https://d3nn873nee648n.cloudfront.net/900x600/17171/220-SM751807.jpg" alt="SM751807" loading="lazy">
    </div>
  </div>
</div>

2. CSS基础样式 #

核心是给画廊容器设置Flexbox换行，给图片项固定高度：

/* 滚动容器：设置你需要的固定高度 */
.infinite-scroll-component {
  overflow-y: auto;
  height: 800px; /* 示例固定高度，可按需调整 */
  padding: 1rem;
}

/* 画廊容器：Flex流式布局，自动换行 */
.custom-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 图片间的间距 */
}

/* 图片项：固定高度，禁止伸缩 */
.image-item {
  height: 200px; /* 核心：统一所有图片项高度 */
  flex: 0 0 auto; /* 保持计算出的宽度，不被拉伸/压缩 */
}

/* 图片铺满容器：避免变形 */
.w-100 {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪适配，保持比例 */
  border-radius: 4px; /* 可选：添加圆角 */
}

3. JavaScript动态计算宽度 #

通过图片宽高比和固定高度，计算每个图片项的宽度：

const gallery = document.querySelector('.custom-gallery');
const items = gallery.querySelectorAll('.image-item');

// 计算并设置每个图片项的宽度
function setItemWidths() {
  const fixedHeight = 200; // 和CSS中.image-item的高度一致
  items.forEach(item => {
    const aspectRatio = parseFloat(item.dataset.aspect);
    item.style.width = `${fixedHeight * aspectRatio}px`;
  });
}

// 页面加载后初始化
window.addEventListener('load', setItemWidths);
// 窗口 resize 时重新计算（可选，适配响应式）
window.addEventListener('resize', setItemWidths);

纯CSS替代方案（适合固定宽高比场景） #

如果只有少数几种宽高比（比如仅横向、纵向），可以直接用类定义宽度，无需JS：

/* 横向图：宽=200px * 1.5 */
.imageItem-Horizontal {
  height: 200px;
  width: 300px;
  flex: 0 0 auto;
}

/* 纵向图：宽=200px * 0.666 */
.imageItem-Vertical {
  height: 200px;
  width: 133px;
  flex: 0 0 auto;
}

这和目标网站的实现逻辑完全一致，通过预定义类来区分不同宽高比的图片项。

关键细节 #

• 固定高度是核心：所有图片项使用统一高度，这是和传统Masonry的本质区别，保证每行视觉规整。
• 宽高比适配：通过「高度×宽高比」计算宽度，确保图片按原始比例缩放，不会变形。
• Flex换行：利用flex-wrap: wrap实现自动换行，当一行宽度不足时自动跳转下一行。
• 懒加载：保留loading="lazy"属性，优化页面加载性能。

内容的提问来源于stack exchange，提问作者Md Amranur Rahman