refirio.org

HTML

HTMLは以下のとおりです。単にブロック要素を並べているだけです。後ほどクラス名をもとにjQueryのプラグインを反映させるため、class="sample" を設定しています。

<div class="sample">
  <div><p>ブロック1。ブロック1。</p></div>
  <div><p>ブロック2。ブロック2。ブロック2。ブロック2。</p></div>
  ～略～
  <div><p>ブロック8。</p></div>
</div>

CSS

CSSは以下のとおりです。float でブロック要素を並べて表示しています。ここでは高さを指定しません。

<style>
div.sample {
  overflow: hidden;
  width: 600px;
  border: 1px solid #000000;
}
div.sample div {
  float: left;
  width: 200px;
  background-color: #EEEEEE;
}
</style>

JavaScript

JavaScriptは以下のとおりです。まずはjQueryと、自作プラグインの jquery.heightadjust.js を読み込みます。jquery.heightadjust.js は、要素の高さを揃えてくれるjQueryプラグインです。オプションとしてcolumn（カラム数）を指定することができます。例えばブロック要素を3列に並べる場合、3 と指定すると3つごとに要素の高さを揃えてくれます。

<script src="../jquery.js"></script>
<script src="jquery.heightadjust.js"></script>
<script>
$(document).ready(function() {
  $('.sample div').heightadjust({
    column: 3 //カラム数
  });
});
</script>

プラグイン

jquery.heightadjust.js の内容は以下のとおりです。

(function($) {
  $.fn.heightadjust = function(option) {
    var settings = $.extend({
      column: 0
    }, option);

    var heights = [];
    var column  = 0;

    $(this).each(function(i) {
      if (settings.column) {
        column = parseInt(i / settings.column);
      }

      if (heights[column] == undefined || $(this).height() > heights[column]) {
        heights[column] = $(this).height();
      }
    });

    if (settings.column) {
      $(this).each(function(i) {
        $(this).height(heights[parseInt(i / settings.column)]);
      });
    } else {
      $(this).height(heights[0]);
    }

    return this;
  };
})(jQuery);

まずは

$.fn.heightadjust = function(option) {
  var settings = $.extend({
    column: 0
  }, option);

の部分でオプションを受け取ります。columnの初期値は 0 としています。

var heights = [];
var column  = 0;

$(this).each(function(i) {
  if (settings.column) {
    column = parseInt(i / settings.column);
  }

  if (heights[column] == undefined || $(this).height() > heights[column]) {
    heights[column] = $(this).height();
  }
});

指定されたブロック要素のうち、一番高い要素の高さを調べています。

オプションで column が指定されなければ、heights[0] に一番高い要素の高さが入ります。

オプションで column が指定されていれば、1行目の中で一番高い要素の高さが heights[0] に入り、2行目の中で一番高い要素の高さが heights[1] に入り、3行目の中で一番高い要素の高さが heights[2] に入り…となります。

if (settings.column) {
  $(this).each(function(i) {
    $(this).height(heights[parseInt(i / settings.column)]);
  });
} else {
  $(this).height(heights[0]);
}

指定されたブロック要素の高さを変更します。

オプションで column が指定されなければ、すべての要素の高さを heights[0] に変更します。

オプションで column が指定されていれば、その行の中で一番高い要素の高さに変更します。

これで完成です。