Javascript 如何在window.onresize函数中重新计算元素宽度

作为一个自我完善的练习，我正在构建一块普通js，它采用一组不同大小的正方形（所有正方形的纵横比都相同），并将它们放置在流体网格中，这样就没有间隙

在花了一个晚上之后，我有了一个非常基本的模型，它适用于我给出的测试数据

在我证明投入更多时间之前，我需要解决的最后一个问题是：

调整浏览器窗口大小时，不会重新计算父元素（

#container

）的宽度。
此宽度与网格项的纵横比一起用于计算行高，因此当调整窗口大小时，除垂直位置外，所有内容都会正确移动

window.onresize

调用的函数如下

function() {
  var parentElem = this.element;
  console.log(parentElem.offsetWidth);
  var elems = parentElem.getElementsByTagName('*'), i;
  for (i in elems) {
    if((' ' + elems[i].className + ' ').indexOf(' ' + 'tile' + ' ') > -1) {
      var ele = elems[i];
      var tile_size = ele.getAttribute('data-grid-size');
      var tile_col = ele.getAttribute('data-grid-col');
      var tile_row = ele.getAttribute('data-grid-row');
      var col_width = (100 / this.options.cols); // column width in %
      var row_height = (parentElem.getElementWidth() / this.options.cols) / this.options.tile_ratio;
      var left_offset = col_width * tile_col;
      var top_offset = row_height * tile_row;
      // Position tiles
      var currentStyle = ele.getAttribute('style');
      ele.setAttribute('style', currentStyle + ' left: ' + left_offset + '%; top: ' + top_offset + 'px;');
    }
  }
}

看

---

那么，您对为什么不重新计算元素的宽度有什么想法吗？

这一行来自您的小提琴：

window.onresize = gridfill.layoutGrid();

…不会将函数指定为调整大小处理程序，它会立即调用函数并尝试将返回值指定为调整大小处理程序。您需要删除括号：

window.onresize = gridfill.layoutGrid;

除了在函数中保留正确的上下文外，您需要使用：

window.onresize = gridfill.layoutGrid.bind(gridfill);

请注意，IE不支持

window.onresize = function() { gridfill.layoutGrid(); };