Some bricks (one) of my masonry are not well positioned at the load

[anthony-roux]

Hello,

I use Masonry on shopify x storyblok (headless CMS) and the worry I encounter that at the 1st load a certain image positions badly. Always the same place, it is not related to the image. If I resize my screen manually, the Masonry wall is perfectly repositioned.

MY JS : `module.exports = class GalleryV2 extends Component { onInit(el) { this.el = el; }

onLoad() { if (window.matchMedia("(min-width: 768px)").matches) { this.galleryMasonryV2(); } }

galleryMasonryV2() { var msnry2 = new Masonry(this.el, { itemSelector: ".js-grid-item", columnWidth: ".grid-sizer", gutter: ".gutter-sizer", percentPosition: true, initLayout: false, });

// add event listener for initial layout
msnry2.on("layoutComplete", function() {
  document
    .querySelector(".js-gallery-v2")
    .classList.add("masonry-is-complete");
});

// trigger initial layout
// imagesLoaded( this.el, function() {
//   msnry2.layout();
// });

imagesLoaded(this.el).on("progress", function() {
  // layout Masonry after each image loads
  msnry2.layout();
});

} }; `

MY HTML/LIQUID

`

{% for item in item.images %} {% capture element %}{% cycle 'odd', 'even' %}{% endcapture %} {% assign imgSize = item.img_size | default: 'portrait' %}

{% assign img = item.image %} {% if img != blank %} {% assign heightImg = img.height %} {% assign widthImg = img.width %} {%- capture viewBox -%} {{ widthImg }}x{{ heightImg }} {%- endcapture -%} {% assign viewBox = viewBox | split: 'x' %} {% if imgSize == 'portrait' %} {% assign sizes = '433x649|866x1298' | split: '|' %} {% assign width = '433w|866w' | split: '|' %} {% else %} {% assign sizes = '433x289|866x578' | split: '|' %} {% assign width = '433w|866w' | split: '|' %} {% endif %} {% assign heightImg = img.height %} {% assign widthImg = img.width %} {%- capture viewBox -%} {{ widthImg }}x{{ heightImg }} {%- endcapture -%} {% assign viewBox = viewBox | split: 'x' %} {% assign src = img.src %}

{% assign template_name = 'srcset_img' | prepend : template_prefix %} {% include template_name %}

{% endif %} {% if item.caption != blank %}

{{ item.caption }}

{% endif %}

{% endfor %}

`

MY SCSS :

`.c-gallery { margin-bottom: -10px; margin-right: -10px;

@include mq($until:tablet){ margin-bottom: 0; margin-right: 0; }

@include mq($from:mobile){ height: 0; overflow: hidden; opacity: 0; }

&.masonry-is-complete { @include mq($from:mobile){ opacity: 1; } }

&:after { content: ''; display: block; clear: both; }

.grid-sizer, .js-grid-item { width: calc(25% - 10px);

@include mq($until:mobile){
  width: 100%;
}

}

.gutter-sizer { width: 10px; }

.js-grid-item--width2 { width: calc(75% - 10px);

@include mq($until: mobile){
  width: 100%;
}

}

&__item { margin-bottom: 10px; float: left;

@include mq($until: mobile){
  margin-bottom: 0;
} 

&:hover {
  .c-gallery__legend {
    opacity: 1;
  }
}

}

.c-galleryitem + .c-galleryitem { @include mq($until:mobile){ margin-top: 20px; } }

&__legend { opacity: 0;

 @include mq($until:tablet){
  opacity: 1;
 }  

} }

.c-gallery--v2 { .grid-sizer, .js-grid-item { width: calc(33.33% - 10px);

@include mq($until:mobile){
  width: 100%;
}

} }`

Thanks for your help !

[Gabin-traverse]

Hello, I have the same probleme. First i just whant to thank the fact that is open source and updated.

For me it's on many brick and only on Chrome. Sometimes i have no height on the div. https://www.gabintraverse.art/

But when i resize the window it comme back at is place.

I try many different option to launch the masonry grid, before or after the images are loads, but that didn't fix the bug.

Is it possible to just stop making the script change the height of my div ? Because im ussing a VH responsive height so i dont need resize in pxl.

Have a nice day Gabin.