Isotope Overlapping Images?

Question

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

How do I fix this?

Edit: Here is a fiddle http://jsfiddle.net/TLjay/

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

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>

Answer 1

Update (original answer was wrong because the browser used cached images..)

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

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

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

---

Not sure why it happens, but a simple workaround is (since it gets fixed once you resize the window) to manually call a resize.

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

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