jquery - Masonry is not working until resize window -

i have seen posted couple of times on here neither had solution has worked.

i using jquery masonry lay out lots of divs image , caption inside.

i have set "height:auto;" css of each item in masonry. expected once window has loaded masonry take effect , lay out content should. unfortunately, loads 4 columns images overlapped in height. if set height in px css works, website responsive , need height @ auto preferably, don't want change css height through each media query...

appreciate :)

thanks

the js code is:

    $(window).load(function() {     var columns    = 4,         setcolumns = function() { columns = $( window ).width() > 700 ? 4 : $( window ).width() > 480 ? 2 : 1 };      setcolumns();     $( window ).resize( setcolumns );      $( '#container' ).masonry(     {         itemselector: '.item',         gutterwidth: 66,         isfitwidth: true,         isanimated: true,         columnwidth:  function( containerwidth ) { return containerwidth / columns; }     }); }); 

you should use imagesloaded: http://imagesloaded.desandro.com/

implemented so:

  //le masonry   var freemasonry = $('.masonry');    freemasonry.imagesloaded()     .done(function(){       freemasonry.masonry({         itemselector: 'img'       });     });