Javascript 创建大小未知的图像行，并将其缩放到容器宽度的100%

给定一组具有随机尺寸的图像，我尝试将它们按行显示，以便每行占据容器宽度的100%，并且每个图像之间的空间大致相同。因为我事先不知道尺寸，我也不知道有多少图像会排成一行。现在，我正在使用一个带有flex wrap的容器，容器内是一个具有设置的高度和最大宽度的图像包装列表（因此会裁剪非常宽的图像）。图像本身具有高度：100%和宽度：自动。然后，我有一个调整大小的函数，它使用偏移顶部的值来计算出一行中的图像，并根据从该行中图像的宽度总和计算出的因子来放大它们

它可以工作，但不是很好——首先，我在超时时执行resize函数，因为如果我不这样做，它会在图像全部加载之前尝试调整大小，这会导致问题。此外，该因子也不是完美的，因此我最终在容器的右侧出现了轻微的锯齿状边缘。我可以调整两次大小，结果非常接近，但这似乎很愚蠢。我知道我可以为容器提供justify content:space-between来处理容器左右两侧的锯齿状边缘，但是如果能够正确处理它就好了（而且间距上的差异有点烦人）。最后一个问题是，如果加载后调整了窗口的大小，则整个网格将被弄乱。我想我可以用resizing函数上的setInterval解决这个问题，但是这看起来很混乱（这已经是一个混乱的解决方案）

（Edit：我尝试使用setInterval，除了窗口大小调整问题之外，它提供了更好的结果，因为一旦您将窗口缩小到足以使flex以不同的方式进行包装，重新调整窗口大小将永远不会让事情以以前的方式进行包装。）

有更好的解决办法吗？超时和窗口大小调整是主要问题。理想情况下，我最终会看到谷歌图像结果页面或DeviantArt的首页。我可以使用另一个网格框架，只要它满足我的需要。以下是我的代码（我使用的是Bootstrap，所以一些格式在HTML类中）：

HTML/ERB：

（create_placeholder_array helper仅为具有随机大小的图像创建一个指向placeholder.com的URL数组。）

CSS:

.img包装器{
最大宽度：320px；
最小宽度：100px；
高度：200px；
溢出：隐藏；
}
.电网img宽{
身高：100%；
宽度：自动；
}

JavaScript/JQuery：

document.addEventListener（“TurboLink:load”，函数（）{
imagesPerRow=0
widthPerRow=0
currOffset=$（'.img包装器'）.offset（）.top
setTimeout（函数（）{
$（'.img wrapper'）。每个（函数（i）{
如果（currOffset==$（this）.offset（）.top）{
imagesPerRow++；
widthPerRow+=$（此）.outerWidth（真）；
}否则{
因子=$（'.img grid'）.innerWidth（）/widthPerRow；
console.log（'factor:'+factor）；
$（'.img wrapper'）.slice（i-imagesPerRow，i）.each（function（）{
$（this.css（'height'，$（this.innerHeight（）*factor+'px'）；
$（this.css（'max-width'，$（this.innerWidth（）*factor+'px'）；
})
currOffset=$（this）.offset（）.top；
imagesPerRow=1；
widthPerRow=$（此）.outerWidth（真）；
}
});
}, 1000)
});

---

谢谢你的帮助

您是否尝试将事件侦听器的javascript引用从一个文档更改为另一个窗口

了解其中的差异

window.addEventListener("load", function () {
    ...
}

---

哦，是的，这就是我要找的！不幸的是，我最终决定我不喜欢它的样子，但这仍然是有用的信息。非常感谢。