同位素项目显示在彼此之上

Question

这是小提琴：

https://jsfiddle.net/qdhw0o3a/2/

我无法理解为什么所有物品都在彼此之上展示？它与设置有关吗？我只是使用标准设置（据我所知），它应该产生类似于网站的行为。

$('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'masonry',
})

Answer 1

您需要提供img和max-height以及max-width。

查看更新后的Fiddle

Answer 2

在窗口加载后尝试启动同位素：

$(window).on('load', function() {
   $('.grid').isotope({
       itemSelector: '.grid-item',
       layoutMode: 'masonry',
   })
});

注意：此外，如果您的“ .grid-item”包含图像，请注意“延迟加载图像”。这可能会干扰同位素，并使元素彼此重叠。