Javascript 限制CSS网格中的行数

早上好

我目前正试图实现一个基于新CSS网格的图像库。具体地说，我只希望最初显示一行，然后让用户通过单击ShowMore按钮来展开越来越多的图像

到目前为止，情况是这样的：

现在，我的问题是真实世界的图像（而不是彩色div）需要更多的时间才能完全加载。因此，

ngViewAfterInit

hack不起作用，因为调用

ngViewAfterInit

时总宽度不正确。另外，总宽度是由flexbox布局自动计算的，所以我基本上不知道（早期）

你能想象一个更好的（有效的）解决方案，它可能使用我不知道的CSS网格技术将行数限制为一行吗

---

您可以通过编程方式检索图像，如下所示：

var img = new Image();
img.onload = function() {
  //retrieve this.width
}
img.src = 'http://www.example.com/image.gif';

然后使用它来计算正确的宽度和

photosPerRow