Javascript元素offsetHeight在for循环中返回0

我试图动态获取三列网格中子元素的高度

当

i

等于2或

i

大于1时（即循环中至少有2个元素时），

offsetHeight

正确返回渲染高度（我在专用的

$（“#testheight'）

元素中显示渲染高度值以供检查。）

但是，当

i

等于1时，

offsetHeight

返回0，即使渲染的元素具有高度（在子元素内部通过PHP渲染的

元素）

我找不到错误！请帮忙

function makeGrid(){
  var blocks = document.getElementById("grid_container").children;
  var pad = 0, cols = 3, newleft, newtop;
  var max_height = 0;
  var newoffsetheight = 0;
  for(var i = 1; i < blocks.length; i++){
    if (i % cols == 0) {
      newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
      max_height = Math.max(max_height, newtop + blocks[i-cols].offsetHeight);
      blocks[i].style.top = newtop+"px";
      newoffsetheight = blocks[i].offsetHeight;
    }
    else {
      if(blocks[i-cols]){
        newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
        blocks[i].style.top = newtop+"px";
      }
      newleft = (blocks[i-1].offsetLeft + blocks[i-1].offsetWidth) + pad;
      blocks[i].style.left = newleft+"px";
      newoffsetheight = blocks[i].offsetHeight;
    }
  }
  $('#testheight').html(newoffsetheight);
}

函数makeGrid（）{
var blocks=document.getElementById（“网格容器”）.children；
变量pad=0，cols=3，newleft，newtop；
var max_height=0；
var newoffsetheight=0；
对于（变量i=1；i

当循环中只有一个元素时，

阻塞。长度将仅为1。因此，当for循环开始时，当循环中只有1个元素时，条件
i将阻塞。长度将仅为1。因此，当for循环开始时，条件
i改善了代码，请查看：

函数renderGrid（）{
var blocks=document.getElementById（“网格容器”）.children；
var pad=0，cols=3，新左
var newtop=0
var max_height=blocks.length？blocks[0]。远视：0；
对于（变量i=1；i

问题是，我们仅在创建新行时计算最大高度，而不关心第一行。
改进了代码，请查看：

函数renderGrid（）{
var blocks=document.getElementById（“网格容器”）.children；
var pad=0，cols=3，新左
var newtop=0
var max_height=blocks.length？blocks[0]。远视：0；
对于（变量i=1；i

问题是，我们只在创建新行时计算最大高度，而不关心第一行。
为什么要将
i
设置为1而不是0来启动循环？@LambdaNinja根据评论，您希望
i谢谢，但即使我将循环更改为：for（var i=0；i为什么在开始循环时将
i
设置为1，而不是0？@LambdaNinja根据评论，您可能希望
i谢谢，但即使我将循环更改为：for）（var i=0；我非常感谢！但是它只有在最小有2个块的情况下才有效，如果只有一个块，它仍然会中断：嗯，几乎到了，但有些东西仍然会中断…好的，我管理了，编辑了你的代码，现在可以了。我必须为最大高度创建三个不同的变体再次感谢你的帮助！非常感谢！谢谢就这么多！但是它只有在至少有两个块的情况下才有效，如果只有一个，它仍然会中断：嗯，几乎到了，但有些东西仍然会中断…好的，我管理了，编辑了你的代码，现在我必须为最大高度创建三个不同的变体再次感谢你的帮助！非常感谢！
function renderGrid(){
var blocks = document.getElementById("grid_container").children;
var pad = 0, cols = 3, newleft
var newtop = 0
var max_height = blocks.length ? blocks[0].offsetHeight : 0;

    for(var i = 1; i < blocks.length; i++){
        if (i % cols == 0) {
            newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;     
          blocks[i].style.top = newtop+"px";
          max_height = Math.max(max_height, newtop + blocks[i].offsetHeight);
        } else {
            if(blocks[i-cols]){
                newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
                blocks[i].style.top = newtop+"px";
                max_height = Math.max(max_height, newtop + blocks[i-cols].offsetHeight);
            }
            newleft = (blocks[i-1].offsetLeft + blocks[i-1].offsetWidth) + pad;
            blocks[i].style.left = newleft+"px";
            max_height = Math.max(max_height, newtop + blocks[i-1].offsetHeight);
        }
  }
    $('#grid_container').css('height', max_height);
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);