jquery - jQuery を使用して CSS を変更する: CSS に一貫して影響を与えない

Question

Genesis Framework 上に構築されたカスタムの子テーマを構築しており、画像の高さに基づいて画像の下マージンを計算する jQuery スクリプトをキューに入れています (「日記」カテゴリのみ)。計算は正しく行われているようですが、CSS の修正に一貫性がありません。ページに移動すると、正しく機能する場合とそうでない場合があります。ページを更新しても、通常は機能しません。これは、Safari、Chrome、Firefox (すべて Mac 上) で発生しています。

これは、functions.php でスクリプトをエンキューする方法です。

add_action( 'wp_enqueue_scripts', 'lpt_enqueue_script' );
function lpt_enqueue_script() {
    wp_enqueue_script( 'variable-margins', get_stylesheet_directory_uri() . '/js/variable-margins.js', array( 'jquery' ), '', false );
}

スクリプトは次のようになります。

jQuery(document).ready(
function() {
    if (jQuery('.category-diary img').length > 0){
        var lineHeight = 21;
        jQuery('.category-diary img').each(
        function() {
            var remainder = jQuery(this).height() % lineHeight;
            jQuery(this).css({'margin-bottom': (remainder - 5 + (lineHeight)) + 'px'});
        });     
    };
});

画像が影響を受ける単一ページの URL はhttp://lovelandprovincetown.com/this-is-a-test-post/です。

これが適切に機能しない理由はありますか?

このスクリプトの望ましい結果は、左右の列のテキストが互いに整列するように行の高さを維持するために、画像の下マージンを可変にすることです。おそらくこれを達成する別の方法がありますか？