I am using the jquery masonry for displaying the posts in my site in formatted way.

http://masonry.desandro.com/

The masonry plugins formats the content to be displayed properly.

When the page is scrolled i am fetching the additional posts and appending it to the parent container div 

and then reloading  masonry to format the posts displayed again.It is working fine.

1. <div style="margin: 0px auto; position: relative; height: 9342px;" id="message-network" class="masonry">  <!--parent container div-->
2. <article id="addbox-3510" class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;"> <!--Post1-->
3. <article id="addbox-3509" class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;"><!--Post2-->
4. <article id="addbox-3509" class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;"><!--Post3-->
5. .
6. .
7. .
8. on page scroll new articles gets appended here using the below code
9. </div>

Tasks carried out on page scroll:

1. $("#message-network").append(msg);  //msg = new articles
2. var $container = $('#message-network');
3. $container.imagesLoaded(function() {
4. $('#message-network').masonry('reload');
5. });

But when i append the newly fetched posts on scroll in the container div 'message-network',  the images from the newly loaded posts

overlaps the existing posts in the container div for some time and rearranges itself once masonry is loaded.

I tried to append the posts after the last child of the container div on scroll, but still the images from the newly loaded posts 

overlaps the existing post for some time before masonry is reloaded again.

How do i prevent the newly loaded boxes from overlapping the existing posts div?

An early reply is very much appreciated.

Thanks,

S.