jquery - jQuery Masonry带有图像的流体布局

我像这样启动砌体：

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

问题在于.my-brick包含的图像比应计算的columnWidth宽。我本来希望脚本将项目的width CSS属性设置为columnWidth，但事实并非如此，因此列的宽度与图片一样大。

这是预期的行为吗？

最佳答案

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

建议使用网格系统。

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