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

Question

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

Answer 1

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

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

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

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

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