同位素重叠图像？

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

我该如何解决？

编辑：这是一个小提琴http://jsfiddle.net/TLjay/ http://jsfiddle.net/TLjay/

它的问题是它似乎没有显示我遇到的问题..所以我不知道该怎么做..我已经尝试禁用除同位素之外的所有内容..所有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>

Update (原来的答案是错误的，因为浏览器使用了缓存的图像。)

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

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

See http://jsfiddle.net/TLjay/2/ http://jsfiddle.net/TLjay/2/

不确定为什么会发生，但一个简单的解决方法是（因为一旦你调整窗口大小它就会被修复）手动调用resize.罢工>

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

Demo at http://jsfiddle.net/TLjay/1/ http://jsfiddle.net/TLjay/1/