Я пытаюсь создать полностью отзывчивую галерею изображений, используя Masonry, ImagesLoaded & LazyLoad.
Теперь мне удалось на этой демонстрационной странице .
Это почти работает, как задумано. Единственное, что мне не нравится, это то, что вы видите эффект анимации изображений, скользящих по месту при начальной загрузке страницы. Я установил transitionDuration: '0', чтобы попытаться остановить это, но у него все еще есть эта анимация.
Каждое изображение имеет определенную высоту. Поэтому все изображения, которые загружаются после прокрутки, не перемещаются, что хорошо.
Я могу остановить начальную анимацию, удалив ее из css:
.grid-item img {
height:auto;
}
Но это затем заставляет миниатюры выглядеть не пропорционально при изменении размера браузера.
Так что я ищу способ, которым я все еще могу изменить размер браузера, изображения сохраняют правильные размеры, но также показывают изображения без загрузки анимация при начальной загрузке страницы.