Перекрытие масонства (ошибка Imbalance2)

Question

Я создал свой сайт на Wordpress.org, а тема называется Imbalance2. Я заметил, что в этой теме есть ошибка, и я искал темы о пересекающейся проблеме из-за Masonry js. Я использую imagesLoaded (от пользователя Leger в разделе Использование кладки с загруженными изображениями, спасибо!): Он работает, но иногда мой Chrome по-прежнему перекрывается. Я решил добавить нумерацию страниц вместо "Ленивая загрузка" (чтобы избежать дополнительных проблем…), но я не могу объединить imagesLoaded для #boxes и #related…

Не могли бы вы мне помочь? Здесь мой адрес сайта

Большое спасибо за ваше время!!!

<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

// grid
var $boxes = $('.box');
$boxes.hide();

var $container = $('#boxes');
$container.imagesLoaded( function() {
$boxes.fadeIn();

$container.masonry({
itemSelector: '.box',
columnWidth: 290,
gutterWidth: 40
});
});

$('#related').masonry({
    itemSelector: '.box',
    columnWidth: 290,
    gutterWidth: 40
}).masonry('reload');

});
</script>

Answer 1

Здесь решение я нашел. Как я уже сказал, я изменил "Lazy Load" для разбивки на страницы и написал код ниже, благодаря некоторым пользователям, которые поделились своими решениями на этом форуме.

<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

// grid
var $boxes = $('.box');
$boxes.hide();

var $container = $('#boxes');
$container.imagesLoaded( function() {
$boxes.fadeIn();

$('#boxes').masonry({
    itemSelector: '.box',
    columnWidth: 286,
    gutterWidth: 40
});
});

var $container = $('#related');
$container.imagesLoaded( function() {
$('#related').masonry({
    itemSelector: '.box',
    columnWidth: 286,
    gutterWidth: 40
});
});

});
</script>

Answer 2

Этот твик исправлен в браузере Chrome и Safari.

Добавьте эту строку.

jQuery ("img"). load (function () {jQuery (". container_class"). masonry (); // этот твик исправлен в браузере Chrome и Safari});