0

我正在使用 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 。

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

我尝试过的修复：

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

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

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

4

1 回答 1

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;
    }
于 2013-04-05T21:01:39.273 回答