jQuery Masonry /同位素和流体图像：窗口大小调整时的瞬时重叠

Question

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

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

Answer 1

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

-

对于砌体：

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

使用同位素，以下对我有用：

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

-

再次感谢，奥斯瓦尔达斯。

Answer 2

谢谢你上面的评论...我从这里得到了我的问题的答案，但我只想解释给你 - >我使用同位素使用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

对于同位素版本3，请使用：

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

避免网格项重叠。