带有图像的 jQuery Masonry 流体布局

Question

我是这样启动 Masonry 的:

container.imagesLoaded(function () {
        container.masonry({
            itemSelector: '.my-brick',
            columnWidth: function (containerWidth) {
                return (containerWidth - 80) / 4;
            }
        });
});

问题是 .my-brick 包含的图像比应该计算的 columnWidth 更宽。我本以为脚本会将元素的 width CSS 属性设置为 columnWidth，但事实并非如此，因此列与图片一样宽。

这是预期的行为吗？

Answer 1

是的。你必须使用 CSS 设置 .my-brick 宽度。

推荐使用网格系统。

columnWidth 选项用于设置动态列宽，如果您的布局具有具有多列宽度的元素元素，按列表示元素设置的绝对位置的DOM。它使用 columnWidth 来确定元素之间的距离。如果未设置 columnWidth，则它将采用第一项的尺寸