Question

I’m using JS masonry to absolutely position images on a page, and I’m using some JS to give each image a random margin-top and margin-left to give the effect of random spacing etc. However some of the images overlap. Is there a way to stop this from happening?

You can see the current outcome here: http://richgc.com/freelance/staton/exhibitions-installations/

Thanks,
R

Answer 1

With thanks to @bfavaretto’s suggestion, the issue was that masonry and lazyload don’t go hand in hand, so I added a callback to masonry to reload everytime you scroll.

$(window).scroll(function () {
setTimeout(function(){
    $container.masonry();
}, 0);

});

The only issue is that I bet the load on the page is mega now, so any improvements are welcome.

Thanks.