Question

我对javascript很新，所以请耐心等待，如果描述得非常糟糕......我确定有一个简单的解决方案，如果有人可以花点时间为我查看这段代码：

^我的测试网站

我试图使用Masonry但是卸载的图像导致元素重叠。有一个解决方案（在Masonry附录页面中）提供了一个名为ImagesLoaded的解决方案，我试过了，但我无法让它工作。然后我想，ImagesLoaded可能无法正常工作，因为引起问题的图像是由另一个javascript生成的......

我使用的脚本可以从您的tumblr博客中提取最新图片。这是我最新的tumblr图像，在Masonry安排我的元素之前没有加载。因此tumblr元素之后的元素总是出现在它的顶部。（我无法设置该图像的高度，因为它总是变化的。）

我想我的问题是;怎么做tasonlr脚本加载我最新的tumblr图像才能在Masonry安排我的元素之前？

Answer 1

我认为这可能对您有用 - 将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

Answer 2

嗨，我再次@Rishit Bansal！我终于详细研究了你的问题并得到了经过测试的解决方案！有很多新的编辑，而不是以前的anser，所以我发布了一个新的答案....好吧无论如何这里是你必须做的 - 1.创建一个新的js文件并将其命名为arrangemasonry.js。这是arrangemasonry.js中的代码 -

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
itemSelector: '.item'
});

2.将文件保存在与index.html相同的文件夹中。这是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">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/ASOS" target="_blank"  style="text-decoration:none;">ASOS</a> 
    <font color="#000000" size="-3">&bull;</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">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/joythestore" target="_blank"  style="text-decoration:none;">JOY</a> 
    <font color="#000000" size="-3">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/vice" target="_blank"  style="text-decoration:none;">Vice</a> 
    <font color="#000000" size="-3">&bull;</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">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/buballs" target="_blank"  style="text-decoration:none;">Buballs</a> 
    <font color="#000000" size="-3">&bull;</font> 
    <a href="http://bubblejam.tumblr.com/tagged/don%27t-panic" target="_blank">
    Don't Panic</a> <font color="#000000" size="-3">&bull;</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 &amp; 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.这应该像我测试过的那样工作。耐心等待页面加载，因为图像只有在图像满载后才会被安排。如果你有任何进一步的问题，请告诉我。

如何在砌体之前加载脚本？

2 个答案: