Masonry losing order even with horizontalOrder set to true

[Levyks]

I'm using Isotope with wordpress to organize my posts, however, as you can see in the image, after one element that has twice the height of the others, the order of elements gets really messed up, the 21 is to the right of the 22, the 24 to the right of the 25: And as i keep adding more posts (with a "load more" button) the problem only gets worse This is the theme's code that generates the page:

<section class="grid">

    <div class="grid-sizer"></div>

    //...

    <?php if ($posts->have_posts()) : while ($posts->have_posts()) : $posts->the_post(); ?>

        //...

        <article class="grid-item" >
            //my post structure here
        </article>

    <?php endwhile; ?>

</section>

//...

<?php if (!wp_is_mobile()): ?>
<script type="text/javascript">
    jQuery(document).ready(function($) {

        Isotope.prototype._positionItem = function( item, x, y ) {
            item.goTo( x, y );
        };

        var $grid = $('.grid').isotope({
            itemSelector: '.grid-item',
            percentPosition: true,
            layoutMode: 'masonry',
            masonry: {
                columnWidth: '.grid-sizer',
                horizontalOrder: true
            }
        });
    }); 
</script>
<?php endif; ?>

As you can see, i have horizontalOrder set to true, but this does not appear to be helping that much

[thesublimeobject]

@Levyks — Yes, this is a pretty common issue. From my experience, horizontalOrder typically isn't the culprit, but instead, there is usually some other bug interfering with it. For this reason, I really need to see the entirety of your code, preferably in a CodePen, even if it's simply a reduced version of your situation. If you have a link to the site that you would be willing to share, I could work with that as well. Either way, the context is important and will help me diagnose whether the origin of the issue is coming from elsewhere or not.

As far as I can tell from what you posted, there doesn't seem to be anything obviously wrong; although, what is your reasoning for rewriting the _positionItem function? I am inclined to say that mutating a private function is most likely not a great idea.

[Levyks]

@thesublimeobject to be completely honest, i don't know, i was not the one who initially designed the page, but i tried removing the function rewrite, the problem was not fixed and the transition when i press "load more" became less smooth, i made a code pen to show the issue, here it is: https://codepen.io/levyks/pen/LYbPogP The more you press the "Load More" button at the bottom, the worse the layout gets, and eventually it will look something like the image below, with the middle column being way longer than the other 2

[thesublimeobject]

@Levyks - Sorry for the long delay. Did you get this figured out? If not I can try to help you fix it, if possible. Looking back, there's likely a combo of factors here, such that when you're adding new elements there's more of the large elements than the smaller elements, and due to your config, there's nowhere else the larger elements can fit, so they get continuously added to the middle as the get loaded. Fixing this gets a bit complicated because you'll need to ensure you're loading a balance of small/large items in order to properly sort the items evenly, otherwise you'll need to find a different way to order/layout your items.