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
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);
}