Don't calculate on first load and TypeError

[SENSIB0I]

It's not working on first load. Just after reload it works.

Macy.js settings:

window.onload = function(){
    Macy.init({ 
      container: "#feed",
      mobileFirst: true,
      waitForImages: true,
      margin: 20,
      columns: 1,
      breakAt: {
        768: 2,
      },
    });
    console.log('MACY.JS', Macy)
  }

Second problem shows if I try using default syntax which is on npm macy.js page.

This code:

  const msnry = new Macy({
    container: '#feed',
    mobileFirst: true,
    columns: 1,
    waitForImages: true,
    mobileFirst: true,
    breakAt: {
        768: 2
    },
    margin: {
      x: 20,
      y: 20,
    }
  });

Shows me an "TypeError: Cannot set property 'position' of undefined" I think that documentation to version @2.5.0 may be just invalid. Can you make working example of implementation on codepen? or repository?

[jrmd]

Hi @SENSIB0I

This sounds like it could be an issue with how long its taking for the images to load, you can set waitForImages to equal false and it will recalculate when each image loads.

In addition to this, I'm unsure why you are having the issue with the default syntax, I have created a jsfiddle with the same config posted and all seems to be working correctly (make sure the output window is wider than 768 otherwise only one column will show, giving the impression that it is broken.

[jrmd]

Here is the link to the jsfiddle: https://jsfiddle.net/jrmd/t8rw3Ld1/4/

[BeholdPL]

I have the same problem. I notice this problem occurs when there is a lot of images, in my case I have ~50. My settings:

const msnry_row_1layout_1 = new Macy({
  container: '#row-1 #layout-1  .c-masonry-gallery',
  mobileFirst: true,
  columns: 1,
  breakAt: {
    700: 2,
    1000: 4,
  },
  margin: {
    x: 4,
    y: 4,
  }
})

[damian-krz]

Hi!

I have same issue. Any solve of this problem?

Regards!