如何将逐行排布的Compare Two Images组件改造为响应式网格布局

1. 外层网格布局搭建 #

使用CSS Grid实现自适应列数的容器，通过间距彻底避免组件重叠：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.compare-grid-container {
  display: grid;
  /* 小屏默认1列 */
  grid-template-columns: 1fr;
  /* 行列间距，避免组件互相挤压重叠 */
  gap: 2rem;
  width: 100%;
  padding: 1rem;
}
/* 屏幕宽度≥768px时显示2列 */
@media (min-width: 768px) {
  .compare-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 屏幕宽度≥1200px时显示3列，可根据需求调整列数 */
@media (min-width: 1200px) {
  .compare-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

2. 单个对比组件适配 #

修改原固定宽高的对比组件样式，实现自适应：

.compare-item {
  position: relative;
  width: 100%;
  /* 固定宽高比，避免不同屏幕下组件变形 */
  aspect-ratio: 4/3;
  overflow: hidden;
}
.compare-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.compare-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
}
.compare-slider {
  position: absolute;
  z-index: 10;
  cursor: ew-resize;
  width: 4px;
  height: 100%;
  background-color: #fff;
  left: 50%;
}

3. 滑动逻辑适配响应式尺寸 #

修改原JS逻辑，适配动态变化的组件宽度，同时增加移动端触摸支持：

function initCompareItems() {
  const compareItems = document.querySelectorAll('.compare-item');
  compareItems.forEach(item => {
    const slider = item.querySelector('.compare-slider');
    const overlay = item.querySelector('.compare-overlay');
    let itemWidth = item.offsetWidth;

    // 窗口尺寸变化时重新获取组件宽度
    window.addEventListener('resize', () => {
      itemWidth = item.offsetWidth;
    });

    // 获取光标/触摸点在组件内的相对位置
    function getCursorPos(e) {
      const rect = item.getBoundingClientRect();
      const x = e.touches ? e.touches[0].pageX : e.pageX;
      return x - rect.left;
    }

    // 移动滑块和遮罩层
    function slideMove(pos) {
      if (pos < 0) pos = 0;
      if (pos > itemWidth) pos = itemWidth;
      overlay.style.width = pos + "px";
      slider.style.left = pos + "px";
    }

    // 绑定滑动事件
    function slide(e) {
      e.preventDefault();
      slideMove(getCursorPos(e));
    }

    // 鼠标事件
    slider.addEventListener("mousedown", () => {
      window.addEventListener("mousemove", slide);
      window.addEventListener("mouseup", () => {
        window.removeEventListener("mousemove", slide);
      }, { once: true });
    });

    // 触摸事件，适配移动端操作
    slider.addEventListener("touchstart", () => {
      window.addEventListener("touchmove", slide);
      window.addEventListener("touchend", () => {
        window.removeEventListener("touchmove", slide);
      }, { once: true });
    });
  });
}

// 页面资源加载完成后初始化
window.addEventListener('load', initCompareItems);

核心优化说明 #

• 网格容器的gap属性会自动预留组件间距，彻底解决小屏重叠问题
• 使用aspect-ratio固定对比组件比例，无需写死固定高度，适配所有屏幕尺寸
• 窗口 resize 时重新计算组件宽度，避免滑动逻辑偏移
• 新增触摸事件支持，兼容移动端交互

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