javascript - 同位素项目彼此重叠显示

Question

这是 fiddle :

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

我不明白为什么所有项目都显示在彼此之上？和设置有关系吗？我只是使用标准设置(据我所知)，它应该产生与网站类似的行为。

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

Answer 1

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

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

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