使用 Javascript 进行动态图像对齐

Question

我必须满足我对 Javascript 的好奇心。在开始之前，我应该让你知道，我非常清楚这可以单独使用 CSS 来处理，但我想提高我的 Javascript 技能，所以请幽默:)

关于我想要了解的内容：http://codepen.io/cmegown/pen/CGhpa

假设我们有可能无限数量的图像，每个图像都包裹在一个设置为 display: 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";
  }


}