javascript - 同位素过滤 - 仅加载时的异常间距

Question

我正在对一个使用同位素过滤的 PHP 网站进行一些维护，并且我仍在学习 Javascript。因此，我无法弄清楚如何解决同位素问题。

我的页面有 40 个图 block ，分为两个单独的部分。其中一个部分工作正常，没有错误。但在第二部分中，当我加载页面时，它会显示最后 10-12 个图 block (它会变化，看似随机)。

但是，每当我单击任何过滤器时，它都会正常工作，并将它们推到适当的间距。因此，问题仅在于页面初始加载期间的行为。

有谁知道什么可能导致此类问题？

Answer 1

尝试将 document.ready 更改为 window.load，这将使其在运行 isotope 之前等待图像下载。

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  $.isotope();
});

$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
 $.isotope();
});

实际上，阅读 3rror404 发布的链接，您可以这样做

// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
  $container.isotope('layout');
});