Javascript Masonry не работает с созданными элементами

Question

Я создал страницу, которая использует скрипт для создания divs с изображениями внутри них, и я добавляю источник изображения с помощью кода. Эта страница предназначена для обновления учетной записи пользователя с любыми загруженными изображениями и их отображением. Я следил за многими руководствами по обучению, и все они приводят меня ко всем изображениям, находящимся в одном столбце, и перекрываются. Я в значительной степени использовал код от: http://codepen.io/desandro/pen/bdgRzg, и он не работает. Может ли кто-нибудь направить меня в правильном направлении относительно того, что я сделал неправильно?

HTML код

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

JS код

$(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' 
}); 
}); 
}); 

Конечный результат на фотографиях выглядят как этот http://i58.tinypic.com/xbcv1w.png

Answer 1

С динамически нагруженных элементов, вы можете вызвать кладку, а затем перезагрузить элементы а затем макет:

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