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

Question

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

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

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'); });

--

再次感谢奥斯瓦尔达斯。

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');

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

Answer 3

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

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

以避免重叠的网格项目。