使用Javascript动态对齐图像

Question

我有一个必须满足的Java好奇心。 在开始之前，我应该告诉您，我非常了解可以单独使用CSS进行处理的事实，但是我想提高自己的Javascript技能，使我很幽默：）

有关我要获取的内容的参考： http : //codepen.io/cmegown/pen/CGhpa

假设我们有无限数量的图像，每个图像都包裹在设置为显示的图形中：inline-block，使其与内部图像的大小相同。 这些图像中的每一个都可以是任意尺寸，并且期望的结果是每个图像的底部都完美对齐。 这里的缺点是这是响应性的，因此图像可能会放大或缩小。 这是我对如何实现的想法：

遍历每张图像并找到最高的图像（outerHeight），然后获取同一图像的宽度（outerWidth）。 从outerHeight中减去outerWidth，以获得“主”差异。 再次遍历每个图像以计算每个特定图像的差异，并从“主”差异中减去该差异，然后将该数字应用于顶部边距。 冲洗并重复直到每个图像都与最高图像的底部对齐。

对？ 我认为逻辑是合理的，我只是缺乏用Javascript正确组合这些技巧的技能。 抱歉，发布时间过长，但我们感谢您提供的所有帮助/建议！

Answer 1

function alignImages() {

  // caching selectors
  var imgs = document.getElementsByTagName('img'),
      maxHeight = 0;
  for (idx in imgs) {
    var img = imgs[idx];
    if (img.height > maxHeight) {
      maxHeight = img.height;
    }
  }
  for (idx in imgs) {
    var img = imgs[idx];
    img.style.marginTop = (maxHeight - img.height) + "px";
  }


}