0

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

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

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

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

正确的？我认为逻辑是合理的，我只是缺乏在 Javascript 中将其正确组合在一起的技能。很抱歉这篇超长的帖子，但感谢任何和所有的帮助/建议！

4

1 回答 1

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";
  }


}
于 2013-06-29T03:44:25.877 回答