Почему элементы галереи накладываются друг на друга при загрузке страницы?

Question

[Islam Ibakaev]

галерея (см. see our works) прокачана изотопом фильтрабельности ради.
Однако после загрузке страницы предстаёт в нелучшем виде, но если ресайзнуть окно, тут же исправляется.
Как бы пофиксить эту "неслыханную самодозволенность"?

multi2.surge.sh

p.s. приму замечания по вёрстке, если таковые имеются.

Comments

[tokamame]

у меня в хром 58.0.3029.96 (64-bit) тоже белые отступы между слайдами.

Answer 1

[Андрей Гончаров]

Нужно задействовать вот этот хак с imagesloaded
https://isotope.metafizzy.co/layout.html
Внизу этой страницы раздел "imagesLoaded"

Comments

[Islam Ibakaev]

const grid = document.querySelector('.js-filterable-gallery');
const gallery = new Isotope( grid, {
  itemSelector: '.js-filterable-item',
  layoutMode: 'fitRows',
});

gallery.imagesLoaded().progress( function() {
  gallery.isotope('layout');
});

я не использовал jquery, поэтому у меня ошибка Uncaught TypeError: gallery.imagesLoaded is not a function


как переписать в нативный вариант?

[Islam Ibakaev]

пардон, не заметил ванильный пример в доках, вроде разобрался

imagesLoaded( grid ).on( 'progress', function() {
  // layout Isotope after each image loads
  gallery.layout();
});

Answer 2

[Егор Живагин]

Изотоп отрабатывает после загрузки страницы сразу? Вполне допускаю, что после рендера, но до подгрузки картинок. Чтобы проверить, можно поставить console.log() перед изотопом и в onload картинки в html . Или задать img фиксированный размер

По вёрстке замечаний не увидел, обычный лендинг, просто всё ) Единственное - в мобильной версии на первом слайдере отступы белые между слайдами