Masonry Layout Dynamic Array

Ionic Framework Ionic Angular
1

I am new to Ionic-Angula,trying to masonry layout.I’m using 'masonry.desand

ro’ for this but it doesn’t work properly for dynamic arrays.As the images load, it looks like the following.How can i handle this

Screenshot_2
Screenshot_2360×641 83.3 KB

Screenshot_1
Screenshot_1362×659 56.2 KB

Updated. I solved the problem using imagesloaded

.Html

div class=“grid”>

div *ngFor=“let item of images”>

<img  class="grid-item" [src]="item">

/div>

/div>

.scss

.grid {

margin: 0 auto;

}

.grid-item { width: 170px;margin:5px; }

.ts

declare var Masonry,imagesLoaded: any;

@ViewChild(‘grid’)
grid:ElementRef

ngAfterViewInit()
{
setTimeout(() => {

var imgLoad = imagesLoaded('.grid-item');

imgLoad.on( 'always', function() {

  console.log( imgLoad.images.length + ' images loaded' );

  // detect which image is broken

  for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {

    var image = imgLoad.images[i];

    var result = image.isLoaded ? 'loaded' : 'broken';

    console.log( 'image is ' + result + ' for ' + image.img.src );

  }

});

var elem = document.querySelector('.grid');

var msnry = new Masonry(elem, {

// options

itemSelector: '.grid-item',

fitWidth: true 

});

}, 100);

}