我对javascript很陌生，所以如果描述得非常可怕，请耐心等待......如果有人可以花时间为我检查这段代码，我相信有一个简单的解决方案：
http://nang-nang.net/masonry/index.html
^我的考场
我正在尝试使用 Masonry，但未加载的图像导致元素重叠。提供了一个名为 ImagesLoaded 的解决方案（在 Masonry 附录页面中），我尝试过，但无法让它工作。然后我想，ImagesLoaded 可能无法正常工作，因为导致问题的图像是由另一个 javascript 生成的......
我正在使用从您的 tumblr 博客中提取最新图像的脚本。这是我最新的 tumblr 图像，在 Masonry 安排我的元素之前没有加载。所以 tumblr 元素之后的元素总是出现在它的上面。（我无法设置该图像的高度，因为它总是变化的。）
我想我的问题是；在 Masonry 可以安排我的元素之前，如何让 tumblr 脚本加载我最新的 tumblr 图像？
嗨，我又是@Rishit Bansal！我终于详细研究了您的问题并得到了经过测试的解决方案！与以前的分析器相比，有很多新的编辑，所以我发布了一个新的答案....好吧，这就是你必须做的 - 1. 创建一个新的 js 文件并将其命名为arrangemasonry.js。这是arrangemasonry.js中的代码-
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
itemSelector: '.item'
});
2. 将文件保存在与 index.html 相同的文件夹中。3.这是 index.html 编辑的正确代码-
index.html-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Masonry</title>
<style type="text/css">
body {
background-image: url(http://www.nang-nang.net/concrete3.jpg);
background-repeat: repeat;
margin: 0px;
padding: 0px;
}
@font-face {
font-family: 'bebas_neueregular';
src: url('http://www.nang-nang.net/tumblr/bebasneue-webfont.eot');
src: url('http://www.nang-nang.net/tumblr/bebasneue-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.nang-nang.net/tumblr/bebasneue-webfont.woff') format('woff'), url('http://www.nang-nang.net/tumblr/bebasneue-webfont.ttf') format('truetype'), url('http://www.nang-nang.net/tumblr/bebasneue-webfont.svg#bebas_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: "bebas_neueregular", Arial Narrow, Arial;
font-size: 60px;
font-weight: 100;
line-height: 0px;
margin-bottom: 10px;
color: #666666;
text-transform: uppercase;
}
h2 {
font-family: "bebas_neueregular", Arial;
font-size: 20px;
font-weight: 100;
line-height: 20px;
color: #a80000;
text-transform: uppercase;
}
a:link {
color: #a80000;
border-bottom: 0px;
text-decoration: none;
}
a:active {
color: #a80000;
border-bottom: 0px;
text-decoration: none;
}
a:hover {
color: #a9a9a9;
border-bottom: 0px;
text-decoration: none;
}
a:visited {
color: #a80000;
border-bottom: 0px;
text-decoration: none;
}
.item {
width: 300px;
left: 0px;
margin-right: 10px;
margin-bottom: 10px;
padding: 20px;
background-image: url(http://www.nang-nang.net/portfolio/images/80bg.png);
font-family: Lucida Grande, Arial, Helvetica, sans-serif;
font-size: 10px;
}
</style>
</head>
<body>
<div id="container">
<!-- ///// ONE /////-->
<div class="item">
<h1>Nang-nang</h1>
<font face="Times New Roman, Times, serif" size="5">
..................................................
</font>
<div style="font-size:14px;">nang-nang.net is the portfolio of digital designer Sam Roberts, who also goes by the online moniker <em>bubblejam</em>
</div>
</div>
<!-- ///// TWO /////-->
<div class="item">
<a href="http://bubblejam.tumblr.com/tagged/places-I-have-worked" target="_blank">
<h1>Worked for</h1>
</a>
<font face="Times New Roman, Times, serif" size="5">
..................................................
</font>
<span style="font-family:Lucida Grande, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold;">
<a href="" target="_blank" style="text-decoration:none;">Ted Baker</a>
<font color="#000000" size="-3">•</font>
<a href="http://bubblejam.tumblr.com/tagged/ASOS" target="_blank" style="text-decoration:none;">ASOS</a>
<font color="#000000" size="-3">•</font>
<a href="http://bubblejam.tumblr.com/tagged/by-the-scruff" target="_blank" style="text-decoration:none;">By The Scruff</a>
<font color="#000000" size="-3">•</font>
<a href="http://bubblejam.tumblr.com/tagged/joythestore" target="_blank" style="text-decoration:none;">JOY</a>
<font color="#000000" size="-3">•</font>
<a href="http://bubblejam.tumblr.com/tagged/vice" target="_blank" style="text-decoration:none;">Vice</a>
<font color="#000000" size="-3">•</font>
<a href="http://bubblejam.tumblr.com/tagged/tv-print-factory" target="_blank" style="text-decoration:none;">TV Print Factory</a>
<font color="#000000" size="-3">•</font>
<a href="http://bubblejam.tumblr.com/tagged/buballs" target="_blank" style="text-decoration:none;">Buballs</a>
<font color="#000000" size="-3">•</font>
<a href="http://bubblejam.tumblr.com/tagged/don%27t-panic" target="_blank">
Don't Panic</a> <font color="#000000" size="-3">•</font>
<a href="http://bubblejam.tumblr.com/tagged/twentysix-london" target="_blank">
Twentysix Digital</a>
</span>
</div>
<!-- ///// THREE /////-->
<div class="item">
<h2>Nang-nang photoblog</h2>
<!--start of tumblr script
taken from http://jiapps.com/free-stuff/tumblr-widget-for-your-website.html
-->
<div class='ji-tumblr-photos' style="max-width:280px; overflow:hidden; border:solid 10px white; text-align:center;">
<a id='ji-tumblr-url--1' href=''>
<img border='0' style='margin-left:-25%;' id='ji-tumblr-photo--1' src='' alt='' />
</a>
</div>
<script type='text/javascript' src='http://bubblejam.tumblr.com/api/read/json?number=1&type=photo'></script>
<script type='text/javascript'>
document.getElementById('ji-tumblr-photo--1').setAttribute('src', tumblr_api_read.posts[0]['photo-url-400']);
document.getElementById('ji-tumblr-url--1').setAttribute('href', 'http://bubblejam.tumblr.com');
</script>
<!-- end of tumblr script-->
<br />A collection of illustration, art, GIFs, cartoons, music, fashion, videos & all round design that I find candid or inspirational. <em>Since Aug 2012.</em>
<br />
<br />
<a href="http://bubblejam.tumblr.com" target="_blank" title="bubblejam on Tumblr">bubblejam on tumblr >></a>
</div>
<!-- ///// FOUR /////-->
<div class="item">
<h2>Instagram</h2>
<!-- SnapWidget -->
<iframe src="http://snapwidget.com/in/?u=bmFuZ25hbmduZXR8aW58MjgwfDF8MXx8bm98MHxub25lfG9uU3RhcnR8bm8=&v=19414" title="Instagram Widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:solid 10px white; overflow:hidden; width:280px; height:280px"></iframe>
<br />
<br />
<a href="http://instagram.com/nangnangnet" target="_blank" title="nangnangnet on Instagram">nangnangnet on Instagram >></a>
</div>
<!-- ///// FIVE /////-->
<div class="item">
<iframe width="300" height="300" src="tweets2.html" frameborder="0" scrolling="no"></iframe>
<br />
<br />
<a href="http://twitter.com/bubblejam" target="_blank" title="bubblejam on twitter">bubblejam on twitter >></a>
</div>
</div>
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "arrangemasonry.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="masonry.pkgd.min.js"></script>
</body>
</html>
3.这应该可以工作，因为我已经测试过了。耐心等待页面加载，因为只有在图像完全加载后才会排列图像。如果您有任何进一步的问题，请告诉我。
我认为这可能对你有用 - 将 tumblr 代码保留在 index.html 文件本身的一些脚本标签之间。现在您可以编写一些这样的 javascript，以便仅在加载索引页面后加载外部砌体文件 -
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "masonry.pkgd.min.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
我希望这能解决你的问题！如果您不理解我的部分答案，我可以进行更多编辑，只需发表评论...... PS：请务必删除您之前添加到 masonry.pkgd.min.js 的任何脚本标签