javascript - 限制 CSS 网格中的行数

Question

早上好

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

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

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

您能想象一个更好的(有效的)解决方案，它可能使用我不知道的 CSS 网格技术来将行数限制为 1 吗？

亲切的问候

Answer 1

您可以像这样以编程方式检索图像:

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

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