时间戳

首页 > 解决方案 > 如何在 Chrome 中使用 Masonry 和“columnWidth”？

javascript - 如何在 Chrome 中使用 Masonry 和“columnWidth”？

问题描述

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

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

我在这个网页上使用它。

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%;
    }
}

标签： javascriptmasonry

解决方案

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

在您的情况下.inner，两者之间有一个 div ，因此您可以尝试：

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

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

推荐阅读