Что делать если слетают стили в блоке в портфолио (jquery/js)?

Question

[Артур]

Сама страница: design.ixplaine.com/#portfolio
Все блоки там должны быть ровными, но при первом заходе на страницу они слетают, если потом обновить страницу , они встают на свои места. Если нажать ctrl+f5, они снова слетают..

В чем может быть проблема?
jquery и остальные скрипты вроде бы подключены

Answer 1

[shmatuan]

Скорее всего картинки ещё не успели догрузиться, а скрипт уже их расставил. (т.к. при ресайзе всё опять становится нормальным)
Попробуйте перезапустить скрипт отвечающий за расположение через 1-2 секунды

Comments

[Артур]

Сомневаюсь, что проблема в скорости загрузки картинок т.к. оставлял только 2-3 и было то же самое.

Этот блок брался отсюда, может там есть подсказка? Там все работает как швейцарские часы)

[shmatuan]

Артур, Если ограничить скорость, то как раз что-то похожее)

[shmatuan]

Артур,
Где-то на 70 строку вставить

setTimeout(() => {
var $grid = $(".grid").isotope({
  itemSelector: ".all",
  percentPosition: true,
  masonry: {
    columnWidth: ".all"
  }
})}, 1500)

[Артур]

shmatuan, а в каком из скриптов?

<script src="js/vendor/jquery-2.2.4.min.js"></script>
      <script src="js/popper.min.js"></script>
      <script src="js/vendor/bootstrap.min.js"></script>
      <script src="js/superfish.min.js"></script>
      <script src="js/jquery.ajaxchimp.min.js"></script>
      <script src="js/jquery.magnific-popup.min.js"></script>
      <script src="js/jquery.nice-select.min.js"></script>
      <script src="js/isotope.pkgd.min.js"></script>
      <script src="js/waypoints.min.js"></script>
      <script src="js/jquery.counterup.min.js"></script>
      <script src="js/simple-skillbar.js"></script>
      <script src="js/owl.carousel.min.js"></script>
      <script src="js/main.js"></script>

[shmatuan]

Артур, main.js - он же главный :)

[Артур]

shmatuan, сработало, со средним интернетом подгружает через 1,5с, а со слабым остается в таком же виде

[shmatuan]

Попробуй этот код добавить на 1 строку main.js (перед $(document).ready)
Этот код ждёт пока абсолютно всё (картинки, шрифты, скрипты, ...) загрузится

$(window).bind('load', function() {
  var $grid = $(".grid").isotope({
    itemSelector: ".all",
    percentPosition: true,
    masonry: {
      columnWidth: ".all"
    }
 });

[Денис Васильев]

Используйте плагин imagesLoaded
https://isotope.metafizzy.co/layout.html#imagesloaded

Answer 2

[igumenov]

При отображении используется некий плагин что расставляет все блоки абсолютным позиционирование. Во время загрузки изображение еще не успело загрузиться как расчет высоты уже выполнен. Я бы отключил плагин https://isotope.metafizzy.co/ и добавил вручную функцию сортировки. Здесь эта библиотека не нужна.

Ну а если быстро решить то можно просто добавить в css .single-portfolio{min-height:454px;}