如何在固定尺寸div内排布不同尺寸图片，自动填充空余区域？

解决方案 #

问题根源 #

你当前用默认文档流排布图片，属于行优先的流式布局，不会自动识别并填充上方已存在的空隙，要实现无空隙的紧凑矩形排布，需要换成坐标定位+二维矩形碰撞检测的方案，完全手动控制每张图片的摆放位置。

实现步骤 #

1. 先给容器添加相对定位，内部图片全部用绝对定位，脱离默认文档流：

#canvas {
  width: 1000px;
  height: 1000px;
  position: relative;
  background: #000;
}
#canvas img {
  position: absolute;
  display: block;
}

2. 重写JS逻辑，维护已占用区域列表，每次新增图片时自动扫描可用的空白位置：

const canvas = document.getElementById('canvas')
const btn = document.getElementById('submit-button');
const image_width = document.getElementById('image_width');
const image_height = document.getElementById('image_height');
// 固定容器尺寸
const CANVAS_W = 1000, CANVAS_H = 1000;
// 存储所有已放置的矩形信息：x, y, w, h
let placedItems = [];

// 检查指定坐标位置放w*h的矩形是否合法（不越界、不重叠）
function isValidPosition(x, y, w, h) {
  // 先检查是否超出容器边界
  if (x + w > CANVAS_W || y + h > CANVAS_H) return false;
  // 检查和所有已放置的矩形是否重叠
  for (const item of placedItems) {
    if (
      x < item.x + item.w &&
      x + w > item.x &&
      y < item.y + item.h &&
      y + h > item.y
    ) {
      return false;
    }
  }
  return true;
}

// 找第一个能放下w*h矩形的左上角坐标
function findAvailablePosition(w, h) {
  // 左上角优先扫描，步长可以设为1，也可以根据最小图片尺寸优化
  for (let y = 0; y <= CANVAS_H - h; y++) {
    for (let x = 0; x <= CANVAS_W - w; x++) {
      if (isValidPosition(x, y, w, h)) {
        return {x, y};
      }
    }
  }
  // 没有可用位置返回空
  return null;
}

btn.addEventListener('click', (event) => {
  event.preventDefault();
  const w = parseInt(image_width.value);
  const h = parseInt(image_height.value);
  if (isNaN(w) || isNaN(h) || w <=0 || h <=0) return;
  
  // 找可用位置
  const pos = findAvailablePosition(w, h);
  if (!pos) {
    alert('容器已满，无法放置该尺寸图片');
    return;
  }

  // 创建图片
  const x = document.createElement('img');
  const color = document.getElementById('color');
  x.src = color.value === 'red' ? 'red.png' : 'blue.png';
  x.width = w;
  x.height = h;
  // 设置定位坐标
  x.style.left = pos.x + 'px';
  x.style.top = pos.y + 'px';

  canvas.appendChild(x);
  // 把新放置的图片加入已占用列表
  placedItems.push({
    x: pos.x,
    y: pos.y,
    w: w,
    h: h
  });
});

优化提示 #

如果觉得逐像素扫描性能不够，可以把步长改为你允许的最小图片尺寸（比如最小是10px的话步长设为10），或者用更高效的矩形装箱算法，比如Max Rects算法，性能会更高。

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