带图像的jQuery流体布局

我是这样做的：

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

问题是

.my brick

包含的图像比应该计算的列宽更宽。我本以为脚本会将项的

width

CSS属性设置为columnWidth，但事实并非如此，因此列的宽度与图片一样宽

---

这是预期的行为吗？

是的。您必须使用CSS设置

.my brick

宽度

建议使用网格系统

如果布局中有具有多个列宽的项元素，则可以使用

columnWidth

选项设置动态列宽，按列表示该项在DOM中设置的绝对位置。它使用

columnWidth

确定项目之间的距离。如果未设置

列宽度

，则它将采用第一项的尺寸