How to manage the extra elements in container while using Masonry plugin?

Masonry,a great useful Javascript library for create a dynamic layout.This is a misconception in the minds of people that it is a Jquery plugin and require Jquery to work,whereas this is not a case,it is a pure Javascript library and it is a not a requirement to have Jquery. However,it works good with Jquery too.But,the biggest problem I found is the extra stuff which goes under the container on which Masonry is applied do not get on their positions instead they goes behind all the elements.As,this post is all about how to manage the stuff.So lets begin with it,

In a article before I'd given a introduction of Masonry on Blogger template.However,this will help you to manage the extra stuff i.e blog pager or any type of add banner (as you can see the extra elements are going back to every element whereas it should come at bottom).

This problem arises because the container makes all its child element to position absolute because of which all the extra stuff goes at back.

Solution

The solution is to add the same class in the extra content.If the extra stuff will have the same class as other items it will not get confused with other stuff.Let suppose if I have class item in all my post then if I will add the class item in the blog pager then the blog pager will also get targeted by Masonry.

The one more solution which is present around is the use of Masonry settings.Masonry developer provided a option of stamp because of which all the elements which is selected for Masonry get the position around the stamp selector element.However in both the cases the extra stuff will not confuse with targeted content and will set itself in its position.As shown below.