How can I use masonry in this dynamic div?

How can I use masonry in this dynamic div?

I want to use pageData as the masonry "container", with the class "block"
as the masonry "items". I can't seem to make this work with my pageLoad()
function. How can I add the masonry initialization code so that masonry
works properly?
See here: http://constructorforecast.com/
I want to keep the "look" of sliding the page up and then back down with
new content.
$(function(){
pageLoad('home.php');
$(document).on('click', 'a', function(event){
event.preventDefault();
pageLoad($(this).attr('href'));
});
function pageLoad(pageUrl){
$.getJSON(pageUrl, function (page){
$('#pageData').slideUp( function(){
$('#pageData').html('');
if(page.pageTitle){$('#pageData').append('<div
id="pageTitle" class="title">'+page.pageTitle+'</div>');}
if(page.pageSubTitle){$('#pageData').append('<div
id="pageSubTitle"
class="subTitle">'+page.pageSubTitle+'</div>');}
//create blocks and load
$.each(page.block, function(i){
if(page.block[i].content){
$('#pageData').append('<div id="block'+i+'"
class="block"></div>');
if(page.block[i].colsWide){$('#block'+i).addClass('colsWide'+page.block[i].colsWide);}
if(page.block[i].title){$('#block'+i).append('<div
id="blockTitle'+i+'"
class="title">'+page.block[i].title+'</div>');}
if(page.block[i].subTitle){$('#block'+i).append('<div
id="blockSubTitle'+i+'"
class="subTitle">'+page.block[i].subTitle+'</div>');}
$('#block'+i).append('<div id="blockContent'+i+'"
class="content"></div>');
$('#blockContent'+i).append(page.block[i].content);
}
});
$('#pageData').slideDown();
});
})
.fail(function (){
alert('fail no JSON');
});
}
});