能否用动态变量作为Isotope的.grid-sizer列宽？WordPress响应式模板问题

我要给WordPress做一个响应式作品集模板，用Isotope实现筛选和布局，要求：

• 最大列数9列
• 列最小宽度150px
• 尽可能用最多列数

用公式n = MIN(9, FLOOR(x / y))计算列数（x是容器宽度，y是最小列宽），再把可用宽度占比除以n得到的结果设为CSS变量--Width，用来动态设置列宽。现在能在控制台打印容器宽度，但后面的JS代码拿不到这个变量，整个方案失效。

问题根源 #

1. 变量作用域错误：第一个脚本里的containerWidth是DOMContentLoaded回调的局部变量，外部JS代码无法访问。
2. 未传递CSS变量：就算算出列宽，也没把值赋值给CSS的--Width变量，CSS无法读取。
3. 未处理窗口缩放：窗口大小变化时，列数和列宽不会自动重新计算，无法保持响应式。
4. 缺失Isotope初始化：仅写了布局样式，没启动Isotope的筛选和动态布局功能。

修正后的完整代码 #

HTML（整合JS逻辑）

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <!-- 作品集项目示例 -->
  <div class="element-item" data-category="web">Web项目1</div>
  <div class="element-item" data-category="graphic">平面设计1</div>
  <div class="element-item" data-category="web">Web项目2</div>
  <!-- 更多项目... -->
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const gridElement = document.querySelector('.grid');
  const minWidth = 150;
  const gutterPx = 10;
  let isotopeInstance;

  // 统一处理布局计算与Isotope更新
  function updateLayout() {
    const containerWidth = gridElement.offsetWidth;
    console.log(`容器宽度: ${containerWidth}px`);

    // 计算最大可行列数
    const maxPossibleColumns = Math.floor(containerWidth / (minWidth + gutterPx));
    const columnCount = Math.min(9, maxPossibleColumns);
    console.log(`列数: ${columnCount}`);

    // 计算列宽百分比（扣除 gutter 占比）
    const totalGutterWidth = gutterPx * (columnCount - 1);
    const availableWidth = containerWidth - totalGutterWidth;
    const columnWidthPercent = (availableWidth / containerWidth) * 100 / columnCount;
    console.log(`列宽百分比: ${columnWidthPercent}`);

    // 给网格容器设置CSS变量
    gridElement.style.setProperty('--Width', columnWidthPercent);
    gridElement.style.setProperty('--GutterPercent', (totalGutterWidth / containerWidth) * 100 / (columnCount - 1));

    // 初始化或更新Isotope
    if (isotopeInstance) {
      isotopeInstance.arrange();
    } else {
      isotopeInstance = new Isotope(gridElement, {
        itemSelector: '.element-item',
        layoutMode: 'masonry', // 瀑布流布局，也可换成'fitRows'
        percentPosition: true,
        gutter: '.gutter-sizer',
        columnWidth: '.grid-sizer'
      });
    }
  }

  // 页面加载时执行一次
  updateLayout();

  // 窗口缩放时重新计算布局
  window.addEventListener('resize', updateLayout);
});
</script>

CSS样式

* { box-sizing: border-box; } 

.grid { 
  background: #DDD;
  margin: 0 auto; /* 可选：让网格居中 */
  padding: 10px 0;
} 

/* 清除浮动 */
.grid:after { 
  content: ''; 
  display: block; 
  clear: both; 
} 

.gutter-sizer { 
  width: var(--GutterPercent); /* 动态适配列数的gutter占比 */
} 

.element-item, .grid-sizer { 
  width: calc(var(--Width) * 1%); 
} 

/* 作品集项目样式 */
.element-item { 
  float: left; 
  height: 100px; 
  background: #0D8; 
  border: 2px solid #333; 
  border-color: hsla(0, 0%, 0%, 0.7);
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
}

关键改进点 #

1. 把所有JS逻辑整合到DOMContentLoaded回调内，解决变量作用域问题。
2. 新增updateLayout函数，统一处理列数计算、CSS变量赋值和Isotope的初始化/更新。
3. 监听窗口resize事件，保证窗口缩放时布局自动适配。
4. 修正gutter计算逻辑，让它和列宽联动，避免布局错乱。
5. 加入Isotope初始化代码，启用瀑布流布局和gutter设置。

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