Images overlaping

Hi there,

I have problem of image overlaping, (like this issue https://github.com/shershen08/vue-masonry/issues/9, but i have no plugin) it’s because items change sizes at the same time as the images loads

I saw this :

  mounted: function(){
    this.$redrawVueMasonry();
  },

But there is always a problem, because this doesn’t matter when items change size when the page is loading 😦

It’s possible to fix the problem to use the on progress method of masonry (imagesLoaded - https://masonry.desandro.com/layout.html#imagesloaded) ?

imagesLoaded( grid ).on( 'progress', function() {
  // layout Masonry after each image loads
  msnry.layout();
});

Thanks for help

[rotemrevivo91]

I have the same problem. My solution is to wait for a promise for 950ms (smallest interval that worked for me) and then redraw the masonry layout. The time delay is so small that it’s literally unnoticeable.

mounted(){
	this.onLoad()
},
methods:{
	async onLoad(){
		await this.sleep(950)
		this.$redrawVueMasonry()
	},
	sleep(ms){
  		return new Promise(resolve => setTimeout(resolve, ms))
	}
}

[chakflying]

Came up with an alternative solution for if you know how many images you are loading:

template

<div v-masonry="'my_thing'" transition-duration="1s">
      <div v-masonry-tile>
          <img :src="item"
            @load="imageLoaded"
          />
      </div>
</div>

script

data() {
  return {
      imagesloaded: 0
    }
  },
methods: {
    imageLoaded() {
      this.imagesloaded += 1
      if (this.imagesloaded === this.items.length) {
        this.$redrawVueMasonry('my_thing')
      }
    }
  }

I don’t know why ‘my_thing’ has to be wrapped as a string in both places, but it doesn’t seem to work otherwise.