同位素重叠图像? [英] Isotope Overlapping Images?

问题描述

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

It seems like it only happens in Chrome and Safari.. not Firefox. I'm using it with the foundation responsive framework so I'm not sure what to do about setting the height. It also seems there isnt enough spacing between the images in Chrome/Safari..

我该如何解决?

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

问题是它似乎没有显示我所遇到的问题..所以我不确定该怎么办..我尝试禁用除同位素之外的所有方法..所有jquery /css，它仍然可以在Chrome/Safari中缩小图像，但在Firefox中效果很好.

The problem with it is that it doesn't seem to be displaying the problem I'm having.. so I'm not sure what to do about that.. I've tried disabling everything but isotope.. all jquery/css and It still shrinks the images in Chrome/Safari but its fine in firefox.

此外，如果我点击过滤器下的全部"，它将页面扩展到其预期外观，从而可能有助于弄清这一点

Also, If I hit the "All" under filter it stretches the page to how its suppose to look so that could be helpful in figuring this out

我让它与imagesLoaded一起使用，因此它提供了足够的空间，但是图像左右两侧的空间仍然不是它应该位于的位置.我的脚本在下面

I got it to work with imagesLoaded, so its giving enough space but the space on the left and right of the images is still not where its suppose to be.. my script is below

<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>

推荐答案

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

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

The issue seems to be that the images are not loaded and the calculations fail.

如果将等值线代码包裹在$(window).load(function(){ ..... });中，它似乎可以正常工作.

If you wrap the isotop code in $(window).load(function(){ ..... }); it seems to work as expected..

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

不确定为什么会发生这种情况，但是一个简单的解决方法是(因为一旦调整窗口大小，它就会被修复)来手动调用resize.

所以只需在代码末尾添加$(window).resize();即可解决..

so just adding $(window).resize(); at the end of your code fixes it..

演示位于 http://jsfiddle.net/TLjay/1/

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

这篇关于同位素重叠图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！