jquery - Masonry divs overlapping even after using imagesLoaded -
i'm using masonry + imagesloaded fluid container (no infinite scroll) containing divs multiple images, , number of columns of divs changes according screen size. i'm using 1 google web font.
my problem imagesloaded doesn't seem working? divs of container still overlap.
my script (i included latest jquery, masonry, , imagesloaded scripts before block, , google web font link href near opening head tag):
$(function() { var $posts = $('#posts'); $posts.imagesloaded(function(){ $posts.masonry({ isfitwidth:true, colummnwidth:600, itemselector:'.post', isanimated:true, transitionduration:'.5s' }); }); }); and relevant css (it isn't much)
#posts { z-index:98; position:absolute!important; height:auto!important; margin:auto; left:0; right:0; top:40%; } .post { float:left; position:relative; padding:25px; width:500px; margin:75px 50px 100px; } is there conflicting in css? i've tried other answers same issue me layout still isn't working. let me know if need live example.
please try example js david desandro posted in docs.
http://codepen.io/desandro/pen/f3451d70f80c35812b33956785ee152c/
i having same issue, , switched columnwidth selector his, , added percentposition , gutter , fixed issue.
js
var $grid = $('.grid').imagesloaded( function() { $grid.masonry({ itemselector: '.grid-item', percentposition: true, gutter: 20, columnwidth: '.grid-sizer' }); });
Comments
Post a Comment