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' }); });
Comments
Post a Comment