限制 CSS 网格中的行数答案

【问题标题】：Limit number of rows in CSS grid限制 CSS 网格中的行数
【发布时间】：2018-07-05 07:28:48
【问题描述】：

早上好，

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

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

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

亲切的问候

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：