Javascript Masonry不能使用创建的元素
Javascript Masonry not working with created elements
我创建了一个页面,该页面使用脚本创建包含图像的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');
});
相关文章:
- 在运行时创建元素时移到一边时出错
- 如何在动态创建元素的内联onclick事件中传递对象
- 在 jquery 中创建元素
- 当我动态创建元素时,选择的插件不起作用
- HTML javascript函数来创建元素
- 从外部 js 脚本创建元素并插入到 html 中
- 在 d3 中为数据列表创建元素
- 如何在循环中创建元素并将其添加到DOM中
- JQuery-创建元素并将其连接到其他html
- 创建元素更好还是只在html上准备好它们
- 挂钩文档.使用函数原型创建元素
- Javascript动态创建元素和onclick函数
- 从任何jquery选择器字符串创建元素的最有效方法
- 动态创建元素和添加onclick事件不起作用
- 在javascript中创建元素时,CSS转换规则固有地被覆盖
- 如何在特定的HTML标记下用JavaScript创建元素
- 如何根据我正在读取的节点的元素名称创建元素
- 使用Jquery在元素中创建元素
- 使用JavaScript创建元素并使用它
- 将托管 Bean 与 javascript 结合使用来创建元素