Укладка фотографий при использовании Masonry.js

Question

У меня была эта проблема почти каждый раз, когда я использовал masonry.js на своих сайтах.После полной загрузки страницы изображения из галереи выглядят следующим образом:

Чтобы это исправить, мне нужно обновить страницу, чтобы правильно расположить изображения следующим образом:

Любой совет, как решить эту проблему?

Answer 1

Вы используете библиотеку imagesLoaded, чтобы проверить, все ли изображения загружены перед инициализацией вашей кладочной сетки.

Wordpress поставляется с загруженными изображениями, вам просто нужно добавить его в свою тему.

wp_enqueue_script( 'imagesLoaded' );

Тогда в вашем javascript вы можете сделать оператор if следующим образом:

$('#container').imagesLoaded( function() {
  // images have loaded, initialise masonry grid.
});

В библиотеке Masonry также есть метод .layout, который выкладывает все элементы. Полезно, когда размер предмета изменился.

// jQuery
$grid.masonry('layout')
// vanilla JS
msnry.layout()

https://imagesloaded.desandro.com/

https://masonry.desandro.com/methods.html