Masonry and preloaded – fill all gaps

Hi Chris,
When using preloaded and masonry you need to adjust the css ‘position’ parameter of your containing divs.

Meaning, Masonry positions elements ‘absolute’ to it’s container so you need to adjust the parent containers and remove their positions.

CSS to fix this could be:

.ajax-load-more-wrap{
position: relative;
}
.alm-listing{
position: static !important;
}

Thanks Darren,

The static positioning merely overlays the alm-listing alm-ajax masonry ul
container on top of the preloaded ul container alm-listing alm-preloaded masonry.

I followed your example code from https://connekthq.com/plugins/ajax-load-more/examples/masonry/.

I’ve solved this a few times before.
Now that I think about it some more – it does take a bit of work, because Preloaded splits the results into multiple containers.

Is it possible to send a URL?

I have sent the URL to your e-mail.

I set preloaded_amount=”9″ so that you can see better what happens.

The preloaded container is messed up but gets fixed after the load more button is clicked for the first time. But the container below doesn’t fill the gaps above. It seems like Masonry is not firing until the button is clicked. I also needed to apply a float to the ‘full-image’ class otherwise the images don’t line up in a horizontal row on the initial page load.

.full-image {
    float: left;
    width: 200px;
}

So are you only setting masonry after Ajax complete?
Because you are using preloaded you need to trigger masonry on page load as well.

Then you need to also need to make the masonry container ‘ajax-load-more-wrap’ div, not the UL.

The code below is untested.

$(function() {
   var $container = $('.ajax-load-more-wrap');

   $.fn.almComplete = function(alm){ // Ajax Load More callback function
      $container.masonry('reloadItems'); // Reload masonry items oafter callback
      $container.imagesLoaded( function() { // When images are loaded, fire masonry again.
        $container.masonry();
      });
   };

   function initMasonry(){
      $container.masonry({
         itemSelector: '.full-image'
      });
   }

   if($container.length){
      initMasonry();
   }

});

Worked straight away and looks very nice now!

Five stars for your support Darren, thanks!

If anyone else wants to do the same with preloaded posts, the following re-positions the load more button below the masonry:

.alm-btn-wrap {
    bottom: -30px;
    left: 38%;
    padding: 10px 10px 0;
    position: absolute;
}

I’d like to correct the above post. To make the button appear correctly on page load and not flash in the wrong place before the styles load, first hide the button:

.alm-btn-wrap {
    bottom: -30px;
    display: none;
    padding: 10px 10px 0;
    position: absolute;
}

And then reveal it:

jQuery(document).ready(function($) {
	$(".alm-btn-wrap").css("display", "block");
});