砌体重叠（Imbalance2 Bug）答案

【问题标题】：Masonry Overlapping (Imbalance2 Bug)砌体重叠（Imbalance2 Bug）
【发布时间】：2014-09-08 22:47:24
【问题描述】：

我使用 Wordpress.org 构建了我的网站，主题名为 Imbalance2。我注意到这个主题有一个错误，并且由于 Masonry js，我搜索了有关重叠问题的主题。我使用 imagesLoaded（来自用户 Leger，Using masonry with imagesloaded，谢谢！）：它可以工作，但有时我的 Chrome 仍然会重叠。我决定添加一个分页而不是“延迟加载”（以避免更多问题......）但我无法合并 imagesLoaded 用于#boxes 和#related......

你能帮帮我吗？ Here my site address

非常感谢您的宝贵时间！！！

<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>

【问题讨论】：

标签： javascript jquery wordpress masonry

【解决方案1】：

此调整是对 chrome 和 safari 浏览器的修复。

添加这一行。

jQuery("img").load(function() { jQuery(".container_class").masonry(); //此调整是对 chrome 和 safari 浏览器的修复 });

【讨论】：

您好 Dharmik：非常感谢您的回答！但是我不知道如何添加这一行（我是 js 的初学者）。如果我把它放在“var $boxes = $('.box');”之前砌体不行。也许我必须添加这一行而不是“imagesLoaded”？你能帮我解决这个问题吗？提前致谢！

【解决方案2】：

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

<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>

【讨论】：