限制CSS网格中的行数

Question

早上好

我目前正在尝试基于新的CSS网格实现图像库。详细地说，我只想最初显示一行，然后让用户通过单击显示更多按钮来展开越来越多的图像。

这是到目前为止的样子：https://stackblitz.com/edit/angular-96bdii?file=src%2Fapp%2Fgallery.component.ts

现在，我的问题是真实图像（而不是彩色的 divs ）需要更多时间才能完全加载。因此，ngViewAfterInit hack 不起作用，因为在调用ngViewAfterInit时总宽度不正确。另外，总宽度是由flexbox布局自动计算出来的，所以我基本上不知道（早期）。

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

亲切的问候

Answer 1

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

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

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