Masonry layout issues on first load

Question

Masonry layout issues on first load

1k views Asked by quinox At 17 March 2023 at 14:24

I'm using the Masonry-layout jQuery in combination with Bootstrap 5 as per docs from Bootstrap. I have used this before without any problems in ACF repeater fields. Now I'm using it in an ACF gallery.

The problem is that on first load of the page, the items are displayed almost on top of each-other. The height of that full block is variable on each first-load. After a refresh of the page, the gallery is displayed fine with the masonry.

The problem is the masonry, as I do not see this problem without the masonry. What I have tried so far:

Changing ACF gallery to ACF repeater fields for the images
Added latest jQuery in header.php
disabled all CSS

Is this issue a bug? is it seem before or a know nug?

Kind regards,

Original Q&A

There are 4 answers

**quinox** · Answer 1 · 2023-03-20T07:01:30+00:00

@isherwood, Bootstrap V5.

Integrated Masonry-layout to Bootstrap by adding data-masonry='{"percentPosition": true } to the .row wrapper.

Then added this <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script> to my header.php.

I've added this the necessary code to my row class: <div class="row" data-masonry='{"percentPosition": true }'>

**quinox** · Answer 2 · 2023-03-24T12:18:24+00:00

Problem is solved by using another javascript. According to the Bootstrap docs I had to use:<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" async></script> script. This failed so I used another one script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>. This works great now and problem is solved.

**Niwtro** · Answer 3 · 2023-06-12T18:59:02+00:00

I had the same Problem with [email protected]/dist/js/bootstrap.bundle.min.js and [email protected]/dist/masonry.pkgd.min.js.

The issue was that the browser finished to load the libraries before loading the images I had in my dom. Thus masonry transformed the layout and afterwards when the browser finished to load the images, the layout was destroyed. Since you also have images in your dom, I think my solution could help you.

I solved the problem by moving the libraries loading to the end of the html document and added preloading for the images.

The thired step ist to define the height of the image, so ist will be rendered correctly before ist was loaded completely.

<head>
   <link rel="preload" as="image" type="image/webp" ref="img/image.webp">
</head>
<body>
   <div class="container">
      <div class="row" data-masonry='{"percentPosition": true }'>
         <div class="col-sm-4 col-md-3 py-2">
            <img src="img/image.webp" width="200" height="250">
         </div>
         {{/*  some more cloumns */}}
      </div>
   </div>
   <script src="[email protected]/dist/js/bootstrap.bundle.min.js"</script>
   <script src="[email protected]/dist/masonry.pkgd.min.js"</script>
</body>

**Alex Glinsky** · Answer 4 · 2024-01-30T22:01:47+00:00

You need imagesloaded library

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>

And then you update masonry layout after all images have loaded. (Here i used masonry with bootstrap_v5)

var masonryRow = document.querySelector('.row[data-masonry]'); // Targeting the Masonry container
if (masonryRow) {
    imagesLoaded(masonryRow, function() {
        // Initialize Masonry after all images have loaded
        new Masonry(masonryRow, {
          itemSelector: '.col-12, .col-md-6, .col-lg-4, .col-xl-3', // Targeting the grid items
          percentPosition: true // Since you have 'percentPosition' in your data attribute
        });
    });

TechQA.

Masonry layout issues on first load

There are 4 answers

Related Questions in TWITTER-BOOTSTRAP

Related Questions in JQUERY-MASONRY

Related Questions in ACFPRO

Popular Questions

Popular Tags

Trending Questions