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();
    });
});

可以找到证明这个问题的jsfiddle here。

在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;
    }

jQuery砌体以一定的宽度随机打破

1 个答案: