未知宽度可变列布局优化问询：无需jQuery与旧浏览器兼容

1. 更优方案：纯CSS实现（无需JS） #

直接利用CSS多列布局的column-width: max-content特性，浏览器会自动以元素的最大宽度作为列的最小宽度，在容器内排列最多数量的列，完全不需要JS计算，是最简洁高效的方案：

#wrapper {
  column-width: max-content; /* 核心：自适应元素最大宽度作为列宽基准 */
  padding: 20px;
  border: 2px solid blue;
}
.item {
  padding: 50px;
  border: 2px solid green;
  break-inside: avoid; /* 防止单个元素被拆分到两列，提升布局完整性 */
}

2. 不依赖jQuery的原生JS实现 #

如果需要兼容不支持max-content的旧浏览器，可以用原生JS替代jQuery完成原逻辑：

<style>
#wrapper {
  column-width: 100px; /* 初始占位值，JS会覆盖 */
  padding: 20px;
  border: 2px solid blue;
}
.item {
  padding: 50px;
  border: 2px solid green;
  break-inside: avoid;
}
</style>
<div id="wrapper">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>
<script>
// 计算所有item的最大外宽度（包含内边距、边框、外边距）
const items = document.querySelectorAll('#wrapper .item');
let maxWidth = 0;
items.forEach(item => {
  const style = getComputedStyle(item);
  const totalWidth = item.offsetWidth + parseInt(style.marginLeft) + parseInt(style.marginRight);
  if (totalWidth > maxWidth) {
    maxWidth = totalWidth;
  }
});
// 设置容器列宽
document.getElementById('wrapper').style.columnWidth = `${maxWidth}px`;
</script>

3. 优雅降级：旧浏览器自动成行排列 #

使用CSS特性查询@supports检测浏览器是否支持多列布局，不支持时自动切换为Flex行布局，实现优雅降级：

#wrapper {
  padding: 20px;
  border: 2px solid blue;
}
/* 支持多列布局的现代浏览器 */
@supports (column-width: max-content) {
  #wrapper {
    column-width: max-content;
  }
  .item {
    break-inside: avoid;
  }
}
/* 不支持的旧浏览器（如IE11）自动用Flex行布局 */
@supports not (column-width: max-content) {
  #wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0; /* 可根据需求调整元素间距 */
  }
  .item {
    flex: 0 0 auto; /* 保持元素原有宽度 */
  }
}
.item {
  padding: 50px;
  border: 2px solid green;
}

内容的提问来源于stack exchange，提问作者Scott E. Lee