调整div尺寸时自动补充缺失的正方形方块

要实现窗口尺寸变化时自动补充方块填满最后一行，可以通过 JavaScript 动态计算每行可容纳的方块数量，再根据现有方块总数算出需要补充的数量，具体实现如下：

核心思路 #

1. 计算每行可容纳的方块数：结合容器可用宽度、单个方块宽度以及方块间的间隙，得出每行能放置的方块数量。
2. 动态补充缺失方块：根据现有方块总数和每行容量，算出最后一行缺少的方块数，创建透明占位方块填充。
3. 监听窗口 resize 事件：窗口尺寸变化时，先移除之前补充的占位方块，再重新计算并补充，避免重复添加。

修改后的完整代码 #

HTML #

<div class="container"></div>

CSS #

.container {
  border: 3px solid black;
  width: 50%;
  height: 50%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  padding: 10px;
  gap: 10px;
}

.square {
  min-width: 40px;
  min-height: 40px;
  background-color: black;
}

/* 占位方块样式，透明不影响视觉 */
.filler-square {
  min-width: 40px;
  min-height: 40px;
  background-color: transparent;
}

JavaScript #

const container = document.querySelector(".container");
const initialSquareCount = 20;

// 创建初始20个方块
for (let i = 1; i <= initialSquareCount; i++) {
  const square = document.createElement("div");
  square.classList.add("square");
  container.appendChild(square);
}

// 计算每行可容纳的方块数量
function getSquaresPerRow() {
  const containerStyle = getComputedStyle(container);
  // 容器可用宽度 = 总宽度 - 左右内边距
  const containerAvailableWidth = parseFloat(containerStyle.width) - parseFloat(containerStyle.paddingLeft) * 2;
  const squareWidth = parseFloat(getComputedStyle(document.querySelector(".square")).width);
  const gap = parseFloat(containerStyle.gap);
  
  return Math.floor(containerAvailableWidth / (squareWidth + gap));
}

// 补充缺失的占位方块
function fillMissingSquares() {
  // 先移除之前的占位方块，避免重复
  document.querySelectorAll(".filler-square").forEach(el => el.remove());

  const squaresPerRow = getSquaresPerRow();
  if (squaresPerRow === 0) return;

  const totalRealSquares = container.querySelectorAll(".square").length;
  const remainder = totalRealSquares % squaresPerRow;
  
  // 如果最后一行不满，补充占位方块
  if (remainder !== 0) {
    const neededFillers = squaresPerRow - remainder;
    for (let i = 0; i < neededFillers; i++) {
      const filler = document.createElement("div");
      filler.classList.add("filler-square");
      container.appendChild(filler);
    }
  }
}

// 初始化时执行一次填充
fillMissingSquares();

// 监听窗口尺寸变化，实时调整
window.addEventListener("resize", fillMissingSquares);

关键说明 #

• 占位方块使用透明背景，既占据布局位置，又不会破坏原有视觉效果。
• 通过getComputedStyle获取真实的元素尺寸和间隙值，确保计算结果准确。
• 每次窗口 resize 时先清除旧的占位方块，再重新计算添加，避免重复累积。

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