Javascript Masonry不能使用创建的元素

Javascript Masonry not working with created elements

本文关键字:创建 元素 Masonry 不能 Javascript      更新时间:2023-09-26

我创建了一个页面,该页面使用脚本创建包含图像的div,并使用代码附加图像源。此页面旨在使用任何上传的图像更新用户帐户并显示它们。我遵循了许多教程指南,它们都引导我将所有图像放在一列中并重叠。我几乎使用了 : http://codepen.io/desandro/pen/bdgRzg 中的代码,但它不起作用。有人可以引导我朝着正确的方向前进,说明我做错了什么吗?

网页代码

<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

对于动态加载的项目,您可以调用砖石,然后重新加载项目,然后布局:

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