Support » Plugin: WordPress Infinite Scroll - Ajax Load More » Masonry and preloaded – fill all gaps

  • Resolved chrisgot

    (@chrisgot)



    Hi,

    Seems there is one minor flaw when using Masonry and preloaded li
    elements, or perhaps I missed something? I have three preloaded li items in a horizontal row and sometimes those three li elements will be of varying heights. Next I will press the load more button and more li items load in masonry style. This works correctly in a downward direction, the masonry nicely fills all the gaps – but the masonry doesn’t fill the gaps above: between the first row of preloaded items and those below added by ajax. Is this normal behaviour or can I do something to fix it?

    Thanks!

    https://wordpress.org/plugins/ajax-load-more/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author dcooney

    (@dcooney)

    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/.

    Plugin Author dcooney

    (@dcooney)

    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;
    }
    Plugin Author dcooney

    (@dcooney)

    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");
    });
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Masonry and preloaded – fill all gaps’ is closed to new replies.