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

Question

我这样发起砌体：

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

问题是.my-brick包含比应该计算的 columnWidth 更宽的图像。我本来希望脚本将项目的widthCSS 属性设置为 columnWidth，但它没有使列与图片一样宽。

这是预期的行为吗？

Answer 1

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

建议使用网格系统。

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