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 回答