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

【问题标题】：jQuery Masonry / Isotope and fluid images: Momentary overlap on window resizejQuery Masonry / 同位素和流体图像：窗口调整大小的瞬间重叠
【发布时间】：2013-03-11 09:24:38
【问题描述】：

我注意到，当将 jQuery Isotope 或 Masonry 用于流体/响应式网站时，在调整浏览器窗口大小时，元素会暂时重叠。请看下面的图片，这些图片来自this demo。您还可以在 Isotope website 上看到这种情况。

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

【问题讨论】：

标签： css layout responsive-design jquery-masonry jquery-isotope

【解决方案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'); });

再次感谢奥斯瓦尔达斯。

【讨论】：

谢谢！这有助于解决我在使用 Isotope 时遇到的问题。

【解决方案2】：

对于同位素版本 3 使用：

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

避免重叠的网格项目。

【讨论】：

【解决方案3】：

感谢您在 cmets 以上...我从这里得到了我的问题的答案，但我只是想向您解释-> 我正在使用同位素使用 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 将重新排列所有这些数据。

【讨论】：