同位素重叠图像？

Question

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

我该如何解决？

编辑:这是一个小提琴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>

Answer 1

更新(原始答案错误,因为浏览器使用缓存图像..)

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

如果你将isotop代码包装在$(window).load(function(){ ..... });其中似乎按预期工作..

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

不知道为什么会发生这种情况,但是一个简单的解决方法是(因为一旦你调整窗口大小就得到修复)来手动调用a resize.

所以只需$(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');
      });
    }
});