Question

它似乎只发生在Chrome和Safari中..而不是Firefox。我正在使用它与基础响应框架，所以我不知道如何设置高度。 Chrome / Safari中的图像之间似乎没有足够的间距..

我该如何解决这个问题？

它的问题在于它似乎没有显示我所拥有的问题..所以我不知道该怎么做...我已经尝试禁用除了同位素之外的所有东西..所有jquery / css并且它仍然会缩小Chrome / Safari中的图像，但它在Firefox中很好。

另外，如果我在过滤器下点击“全部”，它会将页面拉伸到它想象的样子，这样可能有助于解决这个问题

我让它与imagesLoaded一起工作，所以它提供了足够的空间，但图像左侧和右侧的空间仍然不是它想象的地方..我的脚本在下面

<script type="text/javascript">
    var $container = $('.isosort')
    // initialize Isotope
        $container.isotope({
            // options...
            resizable: false, // disable normal resizing
            layoutMode : 'fitRows',
            animationEngine : 'best-available',

            // set columnWidth to a percentage of container width
            masonry: { columnWidth: $container.width() / 5 }
        });

        // update columnWidth on window resize
        $(window).smartresize(function(){
            $container.isotope({
            // update columnWidth to a percentage of container width
            masonry: { columnWidth: $container.width() / 5 }
            });
        });
        $container.imagesLoaded( function(){

                $container.isotope({
            // options...
                });
        });

        $('#filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });
    </script>

Answer 1

更新（原始回答错误，因为浏览器使用了缓存图片.. ）

问题似乎是图像未加载且计算失败。

如果将同位素代码包装在$(window).load(function(){ ..... });中，它似乎按预期工作..

请参阅http://jsfiddle.net/TLjay/2/

~~不确定为什么会发生这种情况，但是一个简单的解决方法是（，因为一旦你调整窗口就会修复它）来手动调用resize。~~ < / p> <击>

所以只需在代码末尾添加$(window).resize();即可修复它。

~~http://jsfiddle.net/TLjay/1/的演示~~

Answer 2

imagesLoaded通过检查当前包含元素中的图像来工作。所以在你的情况下，它实际上并没有在$（window）.load（）中做任何事情，因为该元素中没有项目。相反，我建议在使用$ .ajax.success插入项目后再次触发imagesLoaded

success: function(data){
    // Update isotope container with new data. 
    $container.isotope('remove', $container.data('isotope').$allAtoms )
    $container.isotope('insert', $(data) )
      // trigger isotope again after images have been loaded
      .imagesLoaded( function() {
        $container.isotope('reLayout');
      });
    }
});

Answer 3

如果您有可用图像的尺寸，则可以使用SVG占位符来解决。

例如：使用图形元素，并将img的位置为“ position：absolute”，放置在svg顶部。

通过这种方式，同位素将使用占据空间的SVG渲染网格元素，并将img放在其顶部。

<figure>
<svg xmlns="http://www.w3.org/2000/svg"
  width="[inputKnownImageWidth]"
  height="[inputKnownImageHeight]"
></svg>
<img src="" alt="">
</figure>

Answer 4

你应该确保在调用isotope方法之前预先加载所有的图像，这里是真实世界的演示：http://gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html.htm，你用jquery.imagesloaded.min.js插件预加载图像，然后调用同位素，内容赢了没有重叠。

同位素重叠图像？

4 个答案: