私はこのjQuery関数をまとめました。div.article目的は、画像の高さとドキュメントのベースライングリッド（20ピクセル）のバランスをとるために、内部のすべてのimg要素のマージンを計算することです。ベースライングリッドに一致させるには、すべての画像の高さを20の倍数にする必要があります。そうでない場合、たとえば1つの画像の高さが154ピクセルの場合、関数は画像に6ピクセルのマージンを追加し、ベースラインとのバランスを取ります。グリッドが復元されます。
この関数は正しく機能するので、実際の質問は次のとおりです。私はプログラマーではないので、コードは機能しているのに非常にくだらないのではないかと思います。もしそうなら、コードをどのように改善できるでしょうか。
jQueryコード：
$('div.article img').each(function() {
// define line height of CSS baseline grid:
var line_height = 20;
// capture the height of the img:
var img_height = $(this).attr('height');
// divide img height by line height and round up to get the next integer:
var img_multiply = Math.ceil(img_height / line_height);
// calculate the img margin needed to balance the height with the baseline grid:
var img_margin = (img_multiply * line_height) - img_height;
// if calculated margin < 5 px:
if (img_margin < 5) {
// then add another 20 px to avoid too small whitespace:
img_margin = img_margin + 20;
}
// if img has caption:
if ($($(this)).next().length) {
// then apply margin to caption instead of img:
$($(this)).next().attr('style', "margin-bottom: " + img_margin + "px;");
} else {
// apply margin to img:
$(this).attr('style', "margin-bottom: " + img_margin + "px;");
}
});
HTMLコードの例、キャプション付きのimg：
<div class="article">
<!-- [...] -->
<p class="image">
<img src="http://example.com/images/123.jpg" width="230" height="154" alt="Image alt text goes here" />
<small>Image Caption Goes Here</small>
</p>
<!-- [...] -->
</div>
HTMLコードの例、キャプションなしのimg：
<div class="article">
<!-- [...] -->
<p class="image">
<img src="http://example.com/images/123.jpg" width="230" height="154" alt="Image alt text goes here" />
</p>
<!-- [...] -->
</div>
編集：Russ Camの提案に基づいて洗練されたコード：
var line_height = 20;
var min_margin = 5;
$('div.article img').each(function() {
var $this = $(this); // prefixed variable name with $ to remind it's a jQuery object
var img_height = $this.height();
var img_margin = ((Math.ceil(img_height / line_height)) * line_height) - img_height;
img_margin = (img_margin < min_margin)? img_margin + line_height : img_margin;
if ($this.next().length) {
$this.next().css({'margin-bottom' : img_margin + 'px'});
} else {
$this.css({'margin-bottom' : img_margin + 'px'});
}
});