Javascript Masonry not working with created elements

Question

I have created a page that uses a script to create divs with images inside of them and I append the image source using code. This page is intended to update a user's account with any uploaded images and display them. I have followed many of the tutorial guides and they all lead me to all of the images being in one column and overlapping. I pretty much used the code from : http://codepen.io/desandro/pen/bdgRzg and it doesn't work. Can someone direct me in the right direction as to what I did wrong?

HTML Code

<div class="tab-content" id="photos">
                    <div class="grid-sizer"></div>
                    <div class="grid"></div>
</div>

JS Code

$(document).ready(function () { 
allImgs = document.getElementById("photos").getElementsByTagName("img");


//Create Elements For Each Image
for(i = 0; i<photoArr.length;i++)
{
    if(i%3==0)
    {
        div = document.createElement("div");
        div.className = "entries row grid";
        document.getElementsByClassName("grid")[0].appendChild(div);
    }

    //<div class="entry one-third">
    div1 = document.createElement("div");
    div1.className = "entry one-third grid-item";
    div.appendChild(div1);

    /* <figure>
            <img src="images/img.jpg" alt="" />
            <figcaption><a href="recipe.html"><i class="ico i-view"></i> <span>View recipe</span></a></figcaption>
        </figure>
    */
    fig = document.createElement("figure");
    div1.appendChild(fig);
    img = document.createElement("img");
    img.src = photoArr[i];
    fig.appendChild(img);
    figcap = document.createElement("figcaption");
    link = document.createElement("a");
    link.href = "recipe.html";
    figcap.appendChild(link);
    iElement = document.createElement("i");
    iElement.className = "ico i-view";
    figcap.appendChild(iElement);
    span = document.createElement("span");
    t = document.createTextNode("View Recipe");                     
    span.appendChild(t);                                                                                                                                                
    figcap.appendChild(span);                   
    fig.appendChild(figcap);

    /*
    <div class="container">
        <h2><a href="recipe.html">Super easy blueberry cheesecake</a></h2> 
    */
    divCont = document.createElement("div");                                                                                                                                                                            
    divCont.className = "container";
    div1.appendChild(divCont);                                                                  
    h2 = document.createElement("h2");
    divCont.appendChild(h2);   
    link2 = document.createElement("a");
    link2.href = "recipe.html";
    h2.appendChild(link2);
    t2 = document.createTextNode("Yummy food");
    link2.appendChild(t2);
    /*

    /*div class="actions">
        <div>
        */
    divAct = document.createElement("div");
    divAct.className="actions";
    divCont.appendChild(divAct);
    div2 = document.createElement("div");
    divAct.appendChild(div2);

    /* <div class="difficulty"><i class="ico i-easy"></i><a href="#">easy</a></div> */
    div3 = document.createElement("div");
    div3.className="difficulty";
    div2.appendChild(div3);
    iElement2 = document.createElement("i");
    iElement2.className = "ico i-easy";
    div3.appendChild(iElement2);
    link3 = document.createElement("a");
    link3.href = "#";
    t3 = document.createTextNode("easy");
    link3.appendChild(t3);
    div3.appendChild(link3);

    /* <div class="likes"><i class="ico i-likes"></i><a href="#">10</a></div> */
    div4 = document.createElement("div");
    div4.className="likes";
    div2.appendChild(div4);
    iElement3 = document.createElement("i");
    iElement3.className = "ico i-likes";
    div4.appendChild(iElement3);
    link4 = document.createElement("a");
    link4.href = "#";
    t4 = document.createTextNode("10");
    link4.appendChild(t4);
    div4.appendChild(link4);

    /* <div class="comments"><i class="ico i-comments"></i><a href="recipe.html#comments">27</a></div> */
    div5 = document.createElement("div");
    div5.className="comments";
    div2.appendChild(div5);
    iElement4 = document.createElement("i");
    iElement4.className = "ico i-comments";
    div5.appendChild(iElement4);
    link5 = document.createElement("a");
    link5.href = "#";
    t5 = document.createTextNode("27");
    link5.appendChild(t5);
    div5.appendChild(link5);
    /*
                </div>
            </div>
        </div>
    </div>
    */
}

//Masonry Code
var $grid = $('.grid').imagesLoaded( function() {
    $grid.masonry({
    itemSelector: '.grid-item',
    percentPosition: true,
    columnWidth: '.grid-sizer'
}); 
});
});

The end result of the photos look like this http://i58.tinypic.com/xbcv1w.png

Answer 1

With dynamically loaded items, you can call masonry and then reload items and then layout:

//Masonry Code
var $grid = $('.grid').imagesLoaded( function() {
$grid.masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer'
});
$grid.masonry( 'reloadItems' );
$grid.masonry('layout'); 
});