CSS / JS Grid Masonry not working on first loading

[kurt0123]

Hello,

am a completely novice in JS. Been trying to replicate the codepen:
CSS Grid Masonry
On my site here:
Test Website
However on first load, the layout will load broken. If you just play around with the width of the browser. The result will appear perfectly.

Thanks for any suggestion that can help me out.

[Pepster64]

Personally, I think using JavaScript to control responsive design is kind of silly, when CSS is very capable of doing using media queries. I design for mobile first then use media queries and grids/flex for the larger screens.

Here’s an example of what I’m talking abouit

/* Approximately the size of a 1248px large display monitor */
@supports (grid-area: auto) {
  @media screen and (min-width: 78em) {
    .site {
      display: grid;
      grid-template-columns: 1fr minmax(23.4em, 54.6em);
      grid-template-areas: "header header" "nav nav" "main main" "sidebar sidebar" "footer footer";
      justify-content: center;
      width: 75em;
      margin: 0 auto; }

    .masthead {
      grid-area: header;
      background-image: url(../images/img-header-001pg.jpg);
      background-repeat: no-repeat; }

    .main {
      grid-area: main;
      font-size: 1.2em; }

    .sidebar {
      grid-area: sidebar;
      justify-content: center; } } }

[PaulOB]

@kurt0123

However on first load, the layout will load broken

Did you include the ImagesLoaded JS ?

Masonry · Layout

@kurt0123

Been trying to replicate the codepen:

In the settings:

[kurt0123]

@ Pepster64
Can you specify the HTML part please ?
Actually on the test site, the items are static. However I will need to apply this to dynamic items (which shows up with a wide range in height). This is why my only solution (I think) should be js

@ PaulOB
Hello, you are right. It’s now loading but no change.

[PaulOB]

@kurt0123

Hello, you are right. It’s now loading but no change.

Put these 2 scripts at the end of the html before the closing body tag as otherwise there won’t be any images loaded before the script runs.

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
  <script>
    jQuery(window).on('load', function() {
      new JCaption('img.caption');
    });

    function resizeGridItem(item) {
      grid = document.getElementsByClassName("grid")[0];
      rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
      rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
      rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
      item.style.gridRowEnd = "span " + rowSpan;
    }

    function resizeAllGridItems() {
      allItems = document.getElementsByClassName("item");
      for (x = 0; x < allItems.length; x++) {
        resizeGridItem(allItems[x]);
      }
    }

    function resizeInstance(instance) {
      item = instance.elements[0];
      resizeGridItem(item);
    }
    window.onload = resizeAllGridItems();
    window.addEventListener("resize", resizeAllGridItems);
    allItems = document.getElementsByClassName("item");
    for (x = 0; x < allItems.length; x++) {
      imagesLoaded(allItems[x], resizeInstance);
    }
  </script>
</body>

</html>

[kurt0123]

Thanks so much,

you are right. If I load the script in the HTML module on my joomla site, it will work.
Example : https://dev.explora.mu/custom

If I try to load it in my template (am using Joomla) it won’t.
Example: https://dev.explora.mu/custom-2

I have tried loading it in a js file. You can see custom.js is loading in Firebug.

Is there a solution if I can’t add the js in the HTML ?

[PaulOB]

@kurt0123

if I can’t add the js in the HTML ?

Use the document ready of jquery to delay the script initialising until everything is loaded.

jQuery( document ).ready(function() {

// insert masonry initialisation here

});

e.g. That script would look like this when in the head section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
<script>
    jQuery(window).on('load', function() {
      new JCaption('img.caption');
    });

  // document ready inserted here
    jQuery(document).ready(function () {
  // insert masonry initialisation here
  function resizeGridItem(item) {
    grid = document.getElementsByClassName("grid")[0];
    rowHeight = parseInt(
      window.getComputedStyle(grid).getPropertyValue("grid-auto-rows")
    );
    rowGap = parseInt(
      window.getComputedStyle(grid).getPropertyValue("grid-row-gap")
    );
    rowSpan = Math.ceil(
      (item.querySelector(".content").getBoundingClientRect().height + rowGap) /
        (rowHeight + rowGap)
    );
    item.style.gridRowEnd = "span " + rowSpan;
  }

  function resizeAllGridItems() {
    allItems = document.getElementsByClassName("item");
    for (x = 0; x < allItems.length; x++) {
      resizeGridItem(allItems[x]);
    }
  }

  function resizeInstance(instance) {
    item = instance.elements[0];
    resizeGridItem(item);
  }
  window.onload = resizeAllGridItems();
  window.addEventListener("resize", resizeAllGridItems);
  allItems = document.getElementsByClassName("item");
  for (x = 0; x < allItems.length; x++) {
    imagesLoaded(allItems[x], resizeInstance);
  }
});
</script>

[kurt0123]

Thank you so much !