BonBonSlick
@BonBonSlick
Vanilla Web Architect

Динамическая высота для Masonry?

https://codepen.io/asdasdddd/pen/MWYQEaN

Там есть значение height: 310vw;
Я пробовал задать динамическую высоту на JS, однако
1 - нам неизвестна высота пока все не отрисуеться. Это занимает от несокльких секунд, до несокльких десятков. На мобилках будет долго грузить и рендерить.
2 - а после отрисовки, высоту которую мы получаем, эта та высота, как если бы все картинки были выстроены как в примере, одним столбцом, делить это на 2-3-4 не выйдет, тогда масонри может не влезть в экран и подгрузка новых картинок будет остановлена.
3 - и еще, подгрузка картинок lazy, а значит что бы увидеть картинку, она должна попасть в екран. То есть нам неизвестно какая высота будет у картинок которые еще не попадали в экран.

Задавать высоту совсем динамическую, как говорилось ранее, браузер заранее отрисовывает с лихвой наперед.
То есть расстояние до футера будет как если все одним столбцом.
на текущий момент я заранее резервирую место под картинку, высоту исходя из средней.
Увы, посчитать ее точно не выходит из-за выше описанных причин.
Скорее всего это надо как-то реализовать на CSS.

В примере без подгрузки, ее можно добавить простым setTimeout(appendImgs, 5000)
  • Вопрос задан
  • 80 просмотров
Решения вопроса 1
profesor08
@profesor08 Куратор тега CSS
Тот-же самое, но без js
https://codepen.io/Profesor08/pen/gObpmzO

Но если все таки хочешь использовать эту глюковатую либу, то позаботься о том, чтоб у тегов <img> были указаны width и height

<img src="image.png" width="1234" height="234">
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы