jquery для чистого Javascript, чтобы сохранить вертикальный ритм для изображений - PullRequest
Новая
       15

jquery для чистого Javascript, чтобы сохранить вертикальный ритм для изображений

1 голос
/ 16 февраля 2012

В поисках решения для сохранения вертикального ритма изображений я нашел этот отличный сценарий из Филипе Фортес 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.

1 Ответ

0 голосов
/ 16 февраля 2012

Чтобы перевести это на стандартный JavaScript, вам нужно сделать несколько вещей:

  1. Изменить селекторы (напр. var images = documents.getElementsByTagName('img'))

  2. Изменить объекты jQuery (например, вместо .each() мы используем цикл for. Возьмем следующий пример: 

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

Если вы хотите, чтобы я углубился в детали, пожалуйста, оставьте мне комментарий. Перевести эту функцию не составит труда.

...