jQuery Masonry isn't working in Tumblr - tumblr

Question

I'm designing my Tumblr theme as grid (a two-column grid with 500px width on each post) and Masonry doesn't seem to work. The grid isn't "seamless." This is how it looks like right now: image
I don't really know what I'm doing wrong. I've been at it for hours and have tried more than two dozens of suggestions like adding "display: block;" etc. Nothing works. The only change I keep getting besides this is the posts would overlap over each other, which is worse than this.
Here is my complete Tumblr workup: [codes].
Thank you for the help.

Answer 1

There are actually two problems:
You need to move your <div class="post"> </div> tags inside of each post element
You need to close your function call on window.load
So, #1 will look something like this...
<div id="container">
{block:Posts}
{block:Text}
<div class="post">
{block:Title}<span class="title">{Title}</span>{/block:Title}
{Body}
</div><!--post-->
{/block:Text}
{block:Photo}
<div class="post">
<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}</center>
{block:Caption}{Caption}{/block:Caption}
</div><!--post-->
{/block:Photo}
{block:Photoset}
<div class="post">
<center>{Photoset-500}</center>
{block:Caption}{Caption}{/block:Caption}
</div><!--post-->
{/block:Photoset}
{block:Quote}
<div class="post">
<span class="quote">“{Quote}”</span>
{block:Source}{Source}{/block:Source}
</div><!--post-->
{/block:Quote}
{block:Link}
<div class="post">
<a title="" href="{URL}" class="postlink" {Target}>{Name}</a>
{block:Description}{Description}{/block:Description}
</div><!--post-->
{/block:Link}
{block:Audio}
<div class="post">
{AudioPlayerGrey}
{block:Caption}{Caption}{/block:Caption}
</div><!--post-->
{/block:Audio}
{block:Chat}
<div class="post">
{block:Title}<span class="title">{Title}</span>{/block:Title}
<ul class="chat">
{block:Lines}
<li>
{block:Label}<span class="label">{Label}</span>{/block:Label}{Line}
</li>
{/block:Lines}
</ul>
</div><!--post-->
{/block:Chat}
{block:Video}
<div class="post">
<center>{Video-500}</center>
{block:Caption}{Caption}{/block:Caption}
</div><!--post-->
{/block:Video}
{block:Answer}
<div class="post">
<b>{Asker} asked:</b> {Question}
<p>{Answer}
</div><!--post-->
{/block:Answer}
{/block:Posts}
</div><!--container-->
And #2 will look something like this...
jQuery(window).load(function(){
$('#container').masonry({
itemSelector: '.post',
columnWidth : 520
});
});

Answer 2

From what I see on your code when you make a call to masonry on jQuery(window).load(function(){, you forgot to close your load call.
Based off the code you provided your <script type="text/javascript"> has.
jQuery(window).load(function(){
$('#container').masonry({
itemSelector: '.post',
columnWidth : 520
});
(source: iforce.co.nz)
Which looks fine until I saw there is no closing syntax }); and I don't believe you ever call jQuery.noConflict() (it doesn't matter, it will work with jQuery too, but it should look like..
$(window).load(function(){
$('#container').masonry({
itemSelector: '.post',
columnWidth : 520
});
});
You can test it with alert('hello this is a working test');
$(window).load(function(){
alert('hello this is a working test');
$('#container').masonry({
itemSelector: '.post',
columnWidth : 520
});
});
(source: iforce.co.nz)
After the alert box disappears you will notice the jQuery takes effect and the {block:Posts}{/block:Posts} will disappear from view.