從事網頁重構多年，JavaScript 能力常感不足。近期主動承接相關任務，在解決「自適應寬度容器中圖片列表完美顯示」需求時，梳理出一套可落地的實現思路，分享給有類似需求的同學。

需求描述

1. 容器寬度隨用戶操作（如拖拽視窗）動態變化；
2. 寬度變化時，圖片列表始終完整顯示：圖片間固定間距，絕不出現半張圖；
3. 當前寬度無法容納所有圖片時，提供左右箭頭滾動查看。

核心邏輯與實現步驟

1. 計算單張圖片佔用寬度

itemWidth = 圖片寬度 + 間距。假設圖片寬固定（如 150px），間距固定（如 10px），則 itemWidth = 160px。

2. 容器寬度變化時，即時計算可見數量

visibleCount = Math.floor(containerWidth / itemWidth)。若 visibleCount < 總數，顯示箭頭並啟用滾動；否則隱藏箭頭、停用滾動。

3. 滾動實現

以 transform: translateX() 或 margin-left 驅動列表容器平移。每次點擊箭頭位移 visibleCount * itemWidth（整頁翻頁）或 itemWidth（單步滾動），配合 CSS transition 實現平滑動畫。

4. 邊界保護

滾動位移範圍限制在 0 ~ -(總數 - visibleCount) * itemWidth，防止超出。視窗 resize 時重新計算 visibleCount 並校正位移，確保無半圖殘留。

5. 性能優化

• resize 事件採用 requestAnimationFrame 或防抖（debounce 100-200ms）節流；
• 列表較長時考慮虛擬滾動（僅渲染可視區+緩衝區）；
• 圖片懶加載配合 IntersectionObserver。

代碼骨架（原生 JS / 無依賴）

const container = document.querySelector('.list-container');
const list = container.querySelector('.list');
const items = list.children;
const itemWidth = items[0].offsetWidth + parseInt(getComputedStyle(items[0]).marginRight);
const prevBtn = container.querySelector('.prev');
const nextBtn = container.querySelector('.next');

let scrollIndex = 0;

function update() {
  const containerWidth = container.clientWidth;
  const visibleCount = Math.max(1, Math.floor(containerWidth / itemWidth));
  const maxIndex = Math.max(0, items.length - visibleCount);
  scrollIndex = Math.min(scrollIndex, maxIndex);
  list.style.transform = `translateX(-${scrollIndex * itemWidth}px)`;
  prevBtn.style.display = scrollIndex > 0 ? 'block' : 'none';
  nextBtn.style.display = scrollIndex < maxIndex ? 'block' : 'none';
}

prevBtn.addEventListener('click', () => { scrollIndex--; update(); });
nextBtn.addEventListener('click', () => { scrollIndex++; update(); });
window.addEventListener('resize', () => { update(); });
update(); // 初始化

延伸思考

• 圖片寬度不固定時，需先測量所有項寬度，改用累加寬度判斷可見數量；
• 若需無限循環滾動，可複製首尾節點拼接；
• Touch 事件支持移動端拖拽滾動。

實現方法不止此一种，歡迎分享更優雅的方案！