如何在 Chrome 中使用带有“columnWidth”的 Masonry？

问题描述

我正在使用 Desandro 的 masonry package。它在 Firefox 上运行良好，但在 Chrome 上它不适用于 columnWidth 属性。它仅显示一列砌体。如果没有该属性，它可以工作，但从两列到一列的响应式切换不起作用。

默认情况下应该是两列，而在小型设备上应该是一列。我不知道出了什么问题，但现在它也不适用于 Firefox。

我在这个 webpage 上使用它。

jQuery

let $grid = $(".grid").masonry({
    itemSelector: ".grid-item",percentPosition: true,columnWidth: ".grid-sizer",gutter: 10,});

// layout Masonry after each image loads
$grid.imagesLoaded(function () {
    $grid.masonry();
});

CSS

.grid {
    max-width: 100%;
}
.grid-sizer,.grid-item {
    width: calc((100% - 20px) / 2);
}

.grid-item {
    margin-bottom: 10px;
}

.grid-item-2 {
    width: calc((100% - 20px) / 2);
}

@media (max-width: 500px) {
    .grid-item,.grid-item-2 {
        width: 100%;
    }
}

解决方法

（很可能）它仅在 .grid-item 是 .grid 容器的直接子代时才能正常工作。

就您而言，中间有一个 .inner div，因此您可以尝试：

$(".grid .inner").masonry(...);

PS：现在在 Firefox 中也不能正常工作（至少在我的情况下）。