[Tumblr] Masonry + Infinite scrolling ‘overlap’ bug

[neuewave]

I have successfully integrated masonry with infinite scroll but sometimes the posts overlap and don’t “re-shuffle” and find their place, they just stay overlapped so a lot of posts get hidden.

You can see what I am talking about on my blog http://www.neuewave.tumblr.com

Sometimes refreshing or simply scrolling more slowly can stop the problem happening so often but I would like to permanently fix it, can anybody help me out here?

Note: I did not write any of the script for masonry or infinite scroll, I found resources online and had friends help me so try and keep that in mind when explaining things. Think “Layman’s terms” haha.

[ivancruz]

Hey mate I figured this one out just today. The overlapping happens when the images haven’t been loaded and masonry is triggered, you need to load the images before triggering masonry.

I am using the imagesLoaded script from here: https://github.com/desandro/imagesloaded

Just load it on your header the same way you would any other js script then use the script as follow to load both masonry and Infinite scroll.

make sure you modify the script with your theme’s #content, itemSelector, navSelector, nextSelector and itemSelector.

[peterk]

@ivancruz, that was a huge help and exactly what I needed. Worked perfectly, thanks a lot! – Peter

[Jarain]

I tried this , but it doesn’t work in IE8

[Jarain]

Ah.. Because “,” in the end

[hannah2012]

> make sure you modify the script with your theme’s #content, itemSelector, navSelector, nextSelector and itemSelector.

Sorry, but how do I find what they are in the code?

[TheDoc]

When you customize your theme and click on Edit HTML you’ll be able see all of your theme’s code.

If you post a link to your site I’m sure somebody will be able to point you in a right direction.

[hannah2012]

Oh thanks, the link is: http://phony-false-frail.tumblr.com/
I’ve looked through the code, but I’m not sure where to look for what the selectors are called. I only have a very basic knowledge of coding :/

[amyth91]

following @ivancruz’s post,

i’ve had problems with slider and other scripts which uses images, and because it takes time to load the image, the script fails, as it is triggered before the image has loaded.

a simple solution to that is to use

jQuery(window).load(function(){

your script here…….

})

instead of

jQuery(document).ready(function(){

your script here………

})

this makes sure, that your scripts for that bit run only after everything (images) has successfully loaded

[Historical Forums User]

Hi guys, I don’t know if any of you are active any more but I need help. I have no idea what I am doing, I have the same issue as Neue Wave, here’s my blog; http://oluaidh.tumblr.com/

The posts are fine until a bit further down where they just overlay and no more posts are loaded. I’ve gone onto that link http://desandro.github.com/ but there are just loads of files that you can select and some are really long, i’m not sure what to use. I don’t know where to put both of them (the desandro html and the one that ivancruz put up) in my HTML either.

Please help, thank you

[alicehumphries]

I’ve posted the long script in both my description and HTML (I’m unsure of where to put it) and it still hasn’t worked. I’ve changed my theme 100 times and they still over lap. I’m still unsure of what to do. Can someone help me please ?

http://onthejellicoeroad.tumblr.com/

[CourtneyLane]

I have this same problem. I’m just not sure how to modify the script. Could someone help me? My blog is http://trois-petits-mots.tumblr.com/

[Andy Howells]

@courtneylane – They resolved the initial issue using the information on the plugin site: [Unloaded Media Overlapping – JQuery Masonry](http://masonry.desandro.com/docs/help.html#unloaded_media_and_overlapping)

[CourtneyLane]

@andy_unleash Thank you but, I’m new to all this coding stuff so I’m not exactly sure what to do. If I give you my html, would you be able to add the right stuff?

[Andy Howells]

@Courtneylane – Sure, I charge £50/hour for front end development.

**Alternatively**, give it a whirl, see how you get on – web development is all about making mistakes and problem solving.

Have a play around with the recommendations and details on the link I gave you – experimentation is the key to victory, just make sure to backup.

If you try, and fail, come back on here and let us know a specific problem you’re running into with the solution.

You can also make a [codepen](http://Codepen.io) with a stripped down version of what code you’re using.

I made a handy guide on how to CodePen earlier if you’re unsure – [you can view it here](https://css-tricks.com/forums/discussion/21516/a-guide-to-using-codepen-help-us-help-you-)

[Author]

Posts