jquery masonry breaks(stacks images) in chrome/saf

Question

It seems that when I try to load the page, all the images are stacked on top of one another. But if you were to click a link which takes you to the same page (like the home link) then masonry kicks in. So I think masonry is loading too early, like before jquery readies the page or something.

Here my jquery call:

$(document).ready(function(){
    $('#image_roll_container').masonry({
        itemSelector: '.box'
    });

....

Here's the page in question:

http://ratattoos.com/

it works just fine in firefox and IE8.

Answer 1

I had the reverse problem as described: first load worked fine in Mac OS X Safari, but changing the grid with all new items caused them all to stack in the top left corner. Further, waiting for ready event and setting CSS height & width on our elements didn't fix it.

On our site, we have categories of data that display in the masonry grid, and only one category shows at a time. A user could switch the category at any time and trigger an AJAX request to load in the new data. In latest Safari (9.1, 10) and browsers like Chrome, we could simply do this when changing the category to swap in all new elements:

    // domData is HTML string from the server
    // IMJS is our global variable that we use for globals and lookups
    $("#divTemplateCategoryName").after(domData); // insert new HTML
    var elementsToAdd = $(".grid-item-template-info"); //select the elements
    IMJS.MasonryGrid.masonry('addItems', elementsToAdd); // tell masonry to add them
    IMJS.MasonryGrid.masonry('layout'); // tell masonry to layout again

However, in some versions of Safari that wouldn't work, and we had to do this instead:

    // domData is HTML string from the server
    // IMJS is our global variable that we use for globals and lookups
    IMJS.MasonryGrid.masonry('destroy'); // destroy the grid
    $("#divTemplateCategoryName").after(domData); // insert new HTML
    InitMasonry(); // re-do our entire masonry init

Because I don't have the time to track down every browser version that might be affected by this bug, I switched to the latter method for all browsers.

Answer 2

if use $('img').load(function() F5(refesh) => error

New Methods:

$(window).on('load resize', function() {
  if ($('.masonry-wrap').length) {
    $('.masonry-wrap')
    .css('max-width', $(window).width());
  }
});
$(window).on('load', function() {
  if ($('.masonry-wrap').length) {
    setTimeout(function() {
      $('.masonry').masonry({
        columnWidth: 0,
        itemSelector: '.grid-item'
      });
    }, 1);
  }
});

<div class="masonry-wrap">
  <div class="masonry">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
    ....
  </div>
</div>

Answer 3

It needs heights in these browsers to display correctly like Jennifer said. I use php's getimagesize() function to get the height and width of the images. Works perfectly now.

Answer 4

I've managed to fix this problem with the following tweak:

<script type="text/javascript">
    $(document).ready(function(){
        $('img').load(function(){
            $(".content_photo").masonry();
        });
        $(".content_photo").masonry();
    });
</script>

Answer 5

looks like I needed a plugin called imagesLoaded in order for the Monsry script to work properly with the likes of chrome and safari

Answer 6

You are correct about the imagesLoaded. It was working fine in Firefox but stacking in Chrome/Safari.

Here is the link http://masonry.desandro.com/demos/images.html

Code:

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.box'
  });
});