Aligning tumblr posts in masonry grid

I was trying to make a theme for my tumblr blog, which should look like this

Menubar and sidebar is ok, but I am having a little problem in aligning the posts as in the picture above, but i ended up having this in my blog. Please help me. I am using codes as....

CSS :

#content{
width:900px;
top:65px;    
left: 10px;
float: left; 
position: absolute;
}

#container{
float:left;
background:#000;
width: 900px;
margin: 0px auto;
left:10px;
}

.entry {
float:left;
width: 350px;
overflow:hidden;
margin: 15px; 
padding: 15px;
background: {color:box};
display: inline-block;
position: relative;
z-index:2;
-webkit-border-radius:3px;
   -moz-border-radius:3px;
   border-radius:3px;
}

.entry img {
display: block;
width:auto;
max-width: 100%;
}

HTML :

<div id="container">
<div id="content">
<div class="autopagerize_page_element">
{block:Posts}
<div class="entry">
{........Different types of posts........}
</div>
{/block:Posts}
</div></div></div>

JQUERY :

<script src="http://static.tumblr.com/82upcij/4Kio3rj0h/masonry.js"> </script>

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({
navSelector    : '#pagination',  
nextSelector   : '#pagination a#nextPage',
itemSelector : ".entry, .clear",
bufferPx : 40,
loadingImg : "",
loadingText : "Loading",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>