javascript - 同位素重叠图像？

Question

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

我该如何解决这个问题？

编辑:这是一个 fiddle http://jsfiddle.net/TLjay/

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

此外，如果我点击过滤器下的“全部”，它会将页面拉伸(stretch)到它应该看起来的样子，这可能有助于解决这个问题

我让它与 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 .

<罢工>

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

演示在 http://jsfiddle.net/TLjay/1/