jQuery砌体流体天沟修复

0 jquery-masonry

对于我的生活,我无法弄清楚如何移除宽檐槽并在使用流体/百分比布局时设置为0.

我已经尝试设置gutterWidth: 0和边距和填充0%,但它仍然无法正常工作.

这是Masonry网站的代码.

$('#container').masonry({
    itemSelector: '.box',
    gutterWidth:0,
// set columnWidth a fraction of the container width
    columnWidth: function (containerWidth) {
        return containerWidth / 5;
    }
});
Run Code Online (Sandbox Code Playgroud)

CSS

.box {
    width:33%;
    margin:0%;
    padding:0%
}
.box img {
    width:100%;
    height:auto
}
Run Code Online (Sandbox Code Playgroud)

我需要调整什么?

小智 5

我使用基于百分比的布局的砌体有类似的问题.对我来说,它最终成为浏览器滚动条的问题.在没有滚动条的情况下计算宽度.在砌体运行后,由于滚动条出现,测量值略有下降.我能够通过添加以下CSS来解决问题:

body { overflow-y:scroll; }
Run Code Online (Sandbox Code Playgroud)

这会强制滚动条,即使不需要滚动条,这也可以使计算准确并修复排水沟.

希望这有助于其他人.