砌体重叠(Imbalance2 Bug)

Question

我用Wordpress.org构建了我的网站，主题叫做Imbalance2。我注意到这个主题有一个bug，我搜索有关重叠问题的主题，因为砖石js。我使用的是imagesLoaded (来自使用带图像加载的砌体的用户Leger，谢谢！)：它可以工作，但有时我的Chrome仍然会重叠。我决定添加一个分页，而不是“延迟加载”(为了避免更多的问题，…)但我不能将imagesLoaded合并为# for和#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

这是我找到的解决方案。正如我所说的，我更改了分页的“延迟加载”，并且我编写了下面的代码，感谢在这个论坛上共享他们的解决方案的一些用户。

<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(函数(){ jQuery(".container_class").masonry()；//此调整是对chrome和safari浏览器}的修正)；