微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery – 砖石JS重叠物品

在这里一个非常奇怪的问题:[推荐链接删除].第一行商品与第二行中的项目重叠.

砌石物品位于页脚上方的主页下方.你可以看到,它看起来与Chrome不同.在firefox,它看起来不错.

以下是我的Chrome:http://clip2net.com/s/5LIRko的外观

我的jQuery代码是:

jQuery(function($){
var $container = $('.woocommerce ul.products');
    $container.masonry({
          columnWidth:10,gutterWidth: 15,itemSelector: '.product-category'
    });
});

有没有影响行输出的css规则?

解决方法

问题是你的图像.当石工被调用的时候,你的图像没有加载.所以它假设你的元素的高度没有考虑图像的高度.

如果在图像已被缓存后刷新屏幕,您将看到它正确加载.如果您清除缓存和刷新,您将看到它们重新重叠.

四五选项:

>等待图像加载完毕(有些插件可以等待,直到某个div的所有图像被加载为例)>等待加载事件而不是ready事件.而不是使用jQuery(function($){use jQuery(window).on(‘load’,function(){var $= jQuery;你会看到结果.>图像加载后重新应用砖石(不喜欢这个…你会看到闪烁)>我最喜欢的,不要在这里使用砖石!在您的页面上禁用JS,并查看布局.这是你想要的所有的div都是均匀的高度,甚至是宽度.在这里没有理由使用砖石.只是浮动你的元素,让他们自然地在网格中显示.>编辑:另一个选项.指定div的高度,以便高度不依赖于它加载的图像.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐