Масонство работает только при изменении размера браузера

Question

надеюсь, вы можете помочь с этим, я не программист, но мне нравится играть с кодом, пока я не застряну, как сейчас. У меня есть кирпичная кладка для отображения моего портфолио, но когда я загружаю страницу в браузер с минимальной шириной (например, шириной 400 пикселей), изображения накладываются, мне приходится изменять размер браузера, а затем они приспосабливаются.

Я использую 3 js, которые я скачал из интернета. кирпичная кладка главный isotope.pkgd

Большое спасибо заранее.

Сайт

Answer 1

После долгих поисков и испытаний я понял, что проблема не в изотопе или масонстве js-кода, а в структуре html. Я пока не могу понять, я сделал весь сайт в Muse, эта программа генерирует свои собственные div, так что не легко найти, в чем проблема.

Answer 2

Я нашел решение. Прежде всего, это был не масонство, а изотоп. Я неправильно использовал JS. Я связался с разработчиком, и он сказал мне использовать эту функцию imagesloaded

Надеюсь, что это может помочь другим.

лучший

Answer 3

Убедитесь, что вы правильно инициализировали кладку, так как код работает только тогда, когда произошло какое-то событие (событие resize в вашем случае).

Кладка работает над элементом сетки контейнера с группой дочерних элементов.

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

Инициализация с помощью jQuery

Вы можете использовать Masonry в качестве плагина jQuery: $ ('селектор'). Masonry ().

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

Источник: https://masonry.desandro.com/

Редактировать: Пожалуйста, убедитесь, что вы передаете строки (в опциях), если хотите использовать селектор, так как код кладки будет запускать document.querySelector только для строки.

В противном случае значение используется как есть.