jQuery Masonry / Isotope和流体图像：窗口调整大小的瞬间重叠

Question

我注意到当使用jQuery Isotope或Masonry以及流畅/响应式网站时，元素会在调整浏览器窗口大小时暂时重叠。请参阅下面的图片，这是this演示的截图。您还可以在同位素website上看到这种情况。

有什么办法可以避免这种重叠吗？

Answer 1

感谢Osvaldas Valutis在他的博文（http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout）上回答了这个问题。

-

对于砌体：

$(window).resize(function(){ $('#list').masonry('reload'); });

以下内容适用于我，使用同位素：

$(window).resize(function(){ $('#list').isotope('reLayout'); });

-

再次感谢Osvaldas。

Answer 2

感谢您上面的评论...我从这里得到了我的问题的答案，但我只是想向你解释u-＆gt; 我使用同位素使用ajax页面加载所以我的代码是 -

var $container = $('your main container in which your all item will get listed');
 $container.imagesLoaded(function () {
     $container.isotope({
         itemSelector: 'figure',
         filter: '*',
         resizable: false,
         animationEngine: 'jquery'
     });
 });

之后我调用我的ajax用来调用这个函数

$("#filter-container").isotope('reLayout');

在第一页加载时，页面上会有一些数据，因此同位素将调整所有这些，并且在附加ajax加载的数据后，同位素将重新安排所有这些数据。

Answer 3

对于Isotope版本3使用：

$(window).resize(function(){ $('.grid').isotope('layout'); });

避免重叠网格项。