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.
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.
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
your script here…….
your script here………
this makes sure, that your scripts for that bit run only after everything (images) has successfully loaded
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
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 ?
@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 – 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](http://css-tricks.com/forums/discussion/21516/a-guide-to-using-codepen-help-us-help-you-)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".