prototype.jsのElement.getHeight()を利用してn個づつブロックを横に並べていく

css javascript

この模式図みたいに並べていこうというお話。
静的にHTMLを書く場合は何とでもなるんですが、今回は数字を振っているブロックはプログラムの方でループで書き出してくるし、内容量も一定していない。今回みたいに5つかも知れないし、もっとあるかもしれないし、1つだけかもしれないと。

プログラム側で2つおきにclearするclassを付けるようにしてもらうというのもあるんですが、テストしてみるとIE6で3番のボックスが左にずれる。どうやら関連しているボックスのmarginかpaddingが吹っ飛んでしまうようだ。発生条件がいまいち分かってないのが痛いんだけど（自分が）。

実際にはうす緑の部分は固定幅なのでfloatは勝手に下に回ってくれるんだけど、画像の例の場合、3番は2番の下に来る。それはまずい。

最近話題のブロックレベル要素の高さを揃えるheightLine.js - to-Rも考えたんだけど、3番4番が1番と同じ高さというのも微妙。2つおきにクラスグループを設定するという手もあるけどプログラムへの要求は出来るだけ減らしたいので別の方法を検討。
clearを使わず3番が2番の下に来ないという条件を満たすのは右のボックスの高さが左のボックスと同じか大きいということ。でも、内容量が一定していないので高さはぶっちゃけ出力してみないと分からない。ということでjavascriptでやることに決定。

出力するテンプレートはこんな感じで記述

[LOOPの記述]
<div class="hoge" id="****">
  <div class="huga">
    内容
  </div>
</div>
[LOOP終了の記述]
ここにclearブロック

class="hoge"のブロックは内容のほうからユニークになる変数を拝借してidをつける。
class="hoge"の方にwidthやfloatの設定をしてclass="huga"の方に罫線や背景などを設定。

んでjavascriptをLOOP終了の直後に挿入。（prototype.jsは読み込み済み）

<script type="text/javascript">
&gt;!--
function floatrewrite(){
  var divAr = $$('.hoge');
  for (var i = 0,len = divAr.length;i < len ; i = i + 2){
    if (divAr[i + 1]){
      var leftHeight = Element.getHeight(divAr[i].id);
      var rightHeight = Element.getHeight(divAr[i + 1].id);
      if (leftHeight > rightHeight){
        $(divAr[i + 1].id).style.height = leftHeight + 'px';
      }
    }
  }
}

floatrewrite();
//--&lt;
</script>

prototype.jsのElement.getHeight()を使えば表示のheightが取れるのですんなりと設定可能。
ライブラリっぽくは書いていないので「3つ並べるならここの数字を変えて…」みたいには行かないけどちょっと応用すれば何個でも対応可能かと。

javascriptのソースがかなりどん臭いような感じですがここは恥を忍んでエントリーしてみたの巻。