砌体重叠(Imbalance2错误) [英] Masonry Overlapping (Imbalance2 Bug)
问题描述
我使用Wordpress.org构建了我的网站,主题名为Imbalance2.我注意到该主题存在一个错误,由于Masonry js,我搜索了有关重叠问题的主题.我使用的是 imagesLoaded (来自使用砖石结构并加载了图像的用户 ,谢谢!):可以,但有时我的Chrome仍然重叠.我决定添加分页而不是延迟加载"(以避免出现更多问题……),但我无法合并#boxes和#related…的 imagesLoaded
I built my site with Wordpress.org and the theme calls Imbalance2. I noticed that this theme has a bug and I searched topics about the overlapping issue because of Masonry js. I use the imagesLoaded (from user Leger at Using masonry with imagesloaded, thanks!): it works but sometimes my Chrome stills overlapping. I decide to add a pagination instead the "Lazy Load" (to avoid more problems…) but I can't merge imagesLoaded for #boxes and #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>
推荐答案
这是我找到的解决方案.正如我说的,我更改了"Lazy Load"以进行分页,并由于一些在此论坛中共享其解决方案的用户而编写了下面的代码.
Here the solution I found. As I said I changed the "Lazy Load" for pagination and I wrote the code below thanks to some users that shared their solutions in this Forum.
<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>
这篇关于砌体重叠(Imbalance2错误)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!