javascript - 带有 iDangero.us Swiper 的 JQuery Isotope 容器高度问题

Question

编辑：当窗口被调整大小时，脚本被触发并正确执行。非常感谢Сър Георги Демирев！

---

我一直在思考一个问题很长一段时间，但我似乎无法抓住它。在一个摄影作品集网站上，我使用 iDangero.us Swiper 制作幻灯片，使用 JQuery Isotope 制作缩略图库。

现在，它在 Linux 和 Windows 7 上的 Firefox 和 Chrome 上运行良好。

但是，在 IE、Safari 和 Opera 上，网格项显示在垂直线上，而不是网格。

为了找到错误，我从所有内容中删除了代码，直到我发现 Isotope 在我删除代码的 Swiper 部分时停止了这种行为。

父 div 显示为 0 px 高度。将这些更改为固定高度（例如 1000 像素或 100%）不会改变任何内容。

• 这是原始网站：http ://anthron.octans.uberspace.de/meta.php

• 这是一个仍然会产生错误的最小示例：

• http://anthron.octans.uberspace.de/meta.debug.php

• 以及最小的源代码： http: //pastebin.com/H6t9bbNC

编辑：这是 Сър Георги Демирев 建议的实现：

• http://anthron.octans.uberspace.de/meta.debug.2.php

它现在可以工作，但是网格项目后的边距消失了，并且仅在窗口调整大小后才返回。不过现在更进一步了。

我非常感谢任何建议，我对这个一无所知......

Answer 1

我最近遇到了类似的问题，图像堆叠在一起的事实可能意味着脚本没有加载。但是，如果您稍微调整浏览器窗口的大小，就会触发脚本，并且图像会按照应有的方式放置。

包装这段代码

imagesLoaded( '#thumbnailgallery', function(){
    var $container = $('#thumbnailgallery');

      $container.isotope({
        itemSelector: '.element',
        layoutMode: 'masonry',
        masonryHorizontal: {
        columnWidth: 240,
        rowHeight: 240,
        gutterwidth: 50},
      });
    });

in (document).ready 函数如下：

$(document).ready(function () {

    imagesLoaded( '#thumbnailgallery', function(){
    var $container = $('#thumbnailgallery');

      $container.isotope({
        itemSelector: '.element',
        layoutMode: 'masonry',
        masonryHorizontal: {
        columnWidth: 240,
        rowHeight: 240,
        gutterwidth: 50},
      });
    });

});