0

3 列のグリッド内の子要素の高さを動的に取得しようとしています。

iが 2 に等しい場合、またはがi1 より大きい場合 (つまり、ループ内に少なくとも 2 つの要素がある場合)は、レンダリングされた高さを正しく返します (チェック用offsetHeightにレンダリングされた高さの値を専用の要素に表示します)。$('#testheight')

ただし、iが 1 の場合はoffsetHeight、レンダリングされた要素に高さがあっても 0 を返します ( <img>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);
}
4

2 に答える 2

2

ループ内に要素が 1 つしかない場合は、1blocks.lengthだけになります。したがって、for ループが開始するとき、条件i<blocks.lengthはすでに false です。これiは も 1 に等しいためです。forvar i = 0ループで宣言します。お役に立てれば！

于 2016-08-08T17:11:26.587 に答える
1

コードを改善しました。チェックしてください: https://jsfiddle.net/0otvhgkg/8/

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);

問題は、新しい行が作成されたときにのみ max_height を計算し、最初の行をまったく気にしなかったことです。

于 2016-08-10T09:21:43.937 に答える