1

画像の垂直リズムを維持するためのソリューションを求めて、Filipe Fortes http://www.fortes.com/2008/jmetronome-using-jquery-to-keep-typographic-rhythmからこの優れたスクリプトを見つけました。

        $(function() {
          var lineHeight = parseInt($('body').css('line-height'));
          function balanceHeight(el) {
              var h = $(el).outerHeight();
              var delta = h % lineHeight;
              if (delta != 0)
              {
                /* For images and objects, we want to align the bottom w/ the baseline, so we
                 * pad the top of the element. For other elements (text elements that have a
                 * scrollbar), we pad the bottom, to keep the text within on the same baseline */
                var paddingDirection = ($(el).is('img') || $(el).is('object')) ?
                                                      'padding-top' : 'padding-bottom';

                /* Adjust padding, because margin can get collapsed and cause uneven spacing */
                  var currentPadding = parseInt($(el).css(paddingDirection));
                  $(el).css(paddingDirection, currentPadding + lineHeight - delta);
              }
          }

          /* Depending on your content, you may want to modify which elements you want to adjust,
           * by modifying the selector used below. By default, we grab all img, pre, and object
           * elements. */
          $('img').each(function() {
              /* Only works if we're manipulating block objects */
              if ($(this).css('display') == 'inline')
              {
                  $(this).css('display', 'block');
              }

              /* Images need to load before you get their height */
              if ($(this).is('img'))
              {
                  $(this).load(function(){ balanceHeight(this); });
              }
              else
              {
                  balanceHeight(this);
              }
          });
        })

それは私にとっては非常にうまく機能しますが、私はモバイルプロジェクトに取り組んでいるので、それを純粋な JavaScript に変換する方法を考えています。

4

1 に答える 1

0

これを標準の JavaScript に変換するには、いくつかのことを行う必要があります。

  1. セレクターの変更 (例var images = documents.getElementsByTagName('img'))

  2. jQuery オブジェクトを変更します (例: の代わりに.each()、ループを使用しforます。次の例を見てください。

    for (var i = 0; i < images.length; i += 1) {
  // code here
}

詳細を知りたい場合は、コメントを残してください。この関数を翻訳するのはそれほど難しくありません。

于 2012-02-16T15:45:07.880 に答える