jquery - masonry 元素 margin 底部问题

Question

我已经在父元素(一个无序列表)上激活了 Masonry，它包含下面列出的修改后的列表项(使用 Chrome 的 F12 DEV 工具以粉红色显示 margin-bottom 和 margin-right):

加载文档时，尽管每个列表项的 CSS 如下，但仍会发生上述情况；

li {
    background-color: #fff;
    border: 1px solid #dfdfdf;
    float: left;
    padding: 20px;
    position: relative;
    width: calc(50% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;
}

我使用的jQuery如下；

$(document).ready(function(){
    $("ul").masonry({
        itemSelector: 'li'
    });
});

但是，一旦水平调整窗口大小，CSS 样式就会生效，如下所示；

关于如何在页面加载时实现上述目标有什么想法吗？

更新*

JSFiddle:Click here .如果没有出现上述问题，请尝试单击“运行”按钮 (Ctrl + Return)。

Answer 1

对于 webkit 浏览器问题，我只是在 ('#masonry').masonry({ 之前添加了 $(window).load(function(){。现在margin-bottom 适用于每个浏览器上的每个元素。