jQuery Masonry 在某些宽度处随机断裂

Question

我正在使用 jQuery Masonry 开发响应式照片网格。我正在使用一个简单的 CSS 比例网格，一切正常（除了浮动不能垂直工作的事实）。我添加砖石的那一刻，这个布局就中断了。

$(document).ready(function() {

    // select container
    var $work   = $(".work");

    // set columns based on window width
    var columns = 3,
        setColumns = function() { columns = $(window).width() > 768 ? 3 : 2; };

    $work.imagesLoaded(function() {
        $work.masonry({
            itemSelector: '.project',
            columnWidth: function(containerWidth) {
                return containerWidth / columns;
            }
        });

        $(window).on('resize', function() {
                    // set columns now that the browser width is different.
            setColumns();
            $work.masonry('reload');
        }).resize();
    });
});

可以在 here 找到演示该问题的 jsfiddle。

在 768px 断点之上，一切正常（尽管有很多闪烁），但在断点之下，应该是两列只能合二为一。

我尝试过的修复：

• 将 columnWidth 设置为 1 可以在 Safari 和 Firefox 中修复它，但在 Chrome 中没有。
• 将其中一列的宽度设置为 47.5% 而不是 49%（占一个 2% 的边距），但是我的网格在视觉上没有对齐。

我怀疑这与宽度和边距稍微过大有关，但我已经彻底检查了我的代码，这些数字加起来应该是一个不错的甚至 100% 的宽度。只有当 Masonry 进来时它才会破裂。

想法？任何帮助将不胜感激。

Answer 1

将边距设置为 0，砌体应将其全部组合在一起。这是一个演示：

http://jsfiddle.net/uMgwm/1

/* basic grid structure */
 .half, .third, .two-third, .quarter {
    float: left;
    margin: 0;
}
    .two-third + .third, .third:nth-child(3n+0), .quarter:nth-child(4n+0) {
        margin: 0 0 0 0;
    }
    .half:nth-child(2n+0), .third:nth-child(3n+0), .quarter:nth-child(3n+0) {
        margin-right: 0;
    }