Positions of items are not correct initially

[RedFour]

When the page initially loads, all items are in the right column and order, but are stacked on top of each other in an offset. It takes me clicking on an item to trigger a transition where all the items are placed properly. The grid then continues to work as I add or remove items.

<masonry>
	<masonry-brick *ngFor="let key of myKeys" class="brick">
		<my-item [itemKey]="key"></my-item>
	</masonry-brick>
</masonry>

.brick { 
	width: 25%; 
}

screenshot of items overlapping

Is there some option I need to set so that it puts images in the correct position in the initial load?

[arsyed04]

I agree, this is concerning issue. Needs urgent fix.

[arsyed04]

Any update on the issue?

[LongPotato]

I set the option [useImagesLoaded]="true", it solved this issue, but it also messed up the order of the list.

[LongPotato]

I used setTimeout and _msnry.reloadItems() mentioned in #10 to work around it.

[vugar005]

I also encountered same problem.So here is solution:

1. add attribute [useImagesLoaded]="true" like

<masonry [useImagesLoaded]="true">

2.Add this script to index.html otherwise it wont work!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>