Ограничить количество строк в сетке CSS - PullRequest
Новая
       7

Ограничить количество строк в сетке CSS

0 голосов
/ 05 июля 2018

Доброе утро,

В настоящее время я пытаюсь реализовать галерею изображений на основе новой сетки CSS. Подробно, я хочу сначала отобразить только одну строку и позволить пользователю затем расширять все больше и больше изображений, нажимая кнопку Показать больше .

Вот так это выглядит: https://stackblitz.com/edit/angular-96bdii?file=src%2Fapp%2Fgallery.component.ts

Теперь моя проблема в том, что реальные изображения (вместо цветных divs ) требуют больше времени для полной загрузки. Следовательно, ngViewAfterInit hack не работает, так как общая ширина неверна во время вызова ngViewAfterInit. Кроме того, общая ширина автоматически рассчитывается по макету флексбокса, поэтому я, по сути, не знаю этого (раньше).

Не могли бы вы представить лучшее (работающее) решение, которое, возможно, использует методы CSS-сетки, о которых я не знаю, чтобы ограничить число строк одной?

С уважением

1 Ответ

0 голосов
/ 05 июля 2018

Вы можете получить ваши изображения программно следующим образом: 

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

Затем используйте его для вычисления правильной ширины и photosPerRow

...