I have been attempting to create a Tumblr layout with 3 columns using Masonry and ImagesLoaded. However, I have issues with the photosets overlapping. I'm also using PXU Photoset.
Problem:
During the first seconds, the blog looks broken: http://s11.postimg.org/ry4fa614j/Overlapping.jpg
Then, it fixes into sorted columns: http://s16.postimg.org/i13qld4hh/no_Overlapping.jpg
Also, the overlapping happens only with the photosets posts. Any other type of post (including those with only 1 image) work fine.
My Code:
So far, this is the code that works the best for me, but produces the problem I said before:
var $container = $('#threeCol');
$container.masonry({
itemSelector: ".post",
transitionDuration: 0
});
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '0px',
borderRadius: '0px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'}, function () {
$container.imagesLoaded(function(){
$('#threeCol').masonry({
percentPosition: true,
columnWidth: '.post',
itemSelector: '.post',
gutter:20,
resize: true
},
function() {
$('#threeCol').masonry({
appendedContent: $(this)
});
});
}).resize();
$('.post img').imagesLoaded(function() {
$('#threeCol').masonry({
percentPosition: true,
columnWidth: '.post',
itemSelector: '.post',
gutter:20,
resize: true
}).resize();
});
});
});
In here, threeCol is my container and post is each individual post that I want to fit in the grid.
Also, I am not using InfiniteScroll.
Goal:
I would like for the content to load fast and not look broken on the first seconds of loading.
I have already tried:
Since I've been dealing with this problem for days, I have already attempted several things.
$(window).load(...);
This doesn't work at all with my current code. And when it works, it is extremely slow, and user-experience is bad.
Regarding other posts with solutions, I have tried a lot of them, including:
And others on GitHub and links I can't find again.
Thanks for reading my question, and any help will be very welcome!
EDIT:
My question is different from several before, because my issues are photosets (which are groups of two or more images that go on the same post, therefore, are part of the same grid element) instead of individual images. I also do not know how many images are part of each photoset, and I do not know their sizes either.
Photosets are a type of post inside of Tumblr.