【javasript】要素の高さをそろえる関数 7/7更新

高さをそろえる関数

探してもjQueryばかりだったのでjavascriptのみで高さをそろえられる関数を作ろうとしました。

目標

第一引数に揃えたい要素、第二引数に何個ずつそろえるかを指定し、
引数を変更するだけで高さを揃えられるようにする。

heightEquality('揃えたい要素',何個ずつそろえるか);

7/7

以下は新しく調整したものです
ただレスポンシブに対応しようと思ってwindow.onresizeを指定すると、リサイズ時に高さが減っていってしまうので究明中です

/*-----------高さをそろえる関数-----------*/
function heightEquality(your_element,cellsNum){
    var element = document.getElementsByClassName(your_element);
    var elements = [];
    var columns = [];
    var j = 0;
  //.elementの高さを配列に挿入
    for(var i = 0; i < element.length; i++){
      elements[i] = element[i].clientHeight;
    }     
  //.elementをcellsNum組みずつ取り出す
    for(var i = 0; i < (elements.length / cellsNum);i++){
      columns[i] = elements.splice(0, cellsNum);
      console.log(your_element,columns[i]);
      //多次元配列の中の配列を値の大きい順にソート
      columns[i].sort(
        function(a,b){
          return(a < b ? 1 : -1);
        }
      );
    }
  //多次元配列の中の最初の値（最大の高さ）を各組に代入
    //要素をcellsNum組ずつある分だけループ
    for(var i = 0; i < columns.length; i++){
      //cellsNum個目の要素までで一番高いheightを適用
      for(var k = 0; k < cellsNum; k++){
        element[k + j].style.height = columns[i][0] + 'px';
      }
      j += cellsNum;
    }
  }

前のコード

2つの要素までしか対応できてませんでした

code

function heightEquality(your_elements,cellsNum){
    var element = document.getElementsByClassName(your_elements);
    var elements = [];
    var columns = [];
    var j = 0;
    for(var i = 0; i < element.length; i++){
      elements[i] = element[i].clientHeight;
    }    
    for(var i = 0; i < (elements.length / cellsNum);i++){
      columns[i] = elements.splice(i, cellsNum);
      columns[i].sort(
        function(a,b){
          return(a < b ? 1 : -1);
        }
      )
    }
    for(i = 0; i < columns.length; i++){
      element[j].style.height = columns[i][0] + 'px';
      element[j+1].style.height = columns[i][0] + 'px';
      j += cellsNum;
    }
}