1

我在让 Desandro 的 Jquery Masonry 在本地工作时遇到问题。

我的意思是：这件事在 jsFiddle ( http://jsfiddle.net/pozvolte/dwA5G/14/ ) 上运行良好，但是当我尝试在本地启动一个具有相同代码的 HTML 文件时——好吧，它没有。我尝试用 Chrome 26 和 Firefox 20 打开它。

HTML 

<div id="container">
<div class="item">
    <a href="#bosco">
    <img src="http://www.promisedlandblog.com/wp-content/uploads/2010/05/noam_chomsky.jpg">
    </a>
</div>
<div class="item">
    <a href="#berez">
    <img src="http://metrouk2.files.wordpress.com/2013/03/ay_106888896.jpg">
    </a>
</div>
<div class="item">
    <a href="#headcrab">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQAu_KOgafFo71gN5pV3UBGfxUVclnC8vZuZYnGDK0uaD0PNK7L">
    </a>
</div>
<div class="item">
    <a href="#nrktk">
    <img src="http://assets2.lookatme.ru/assets/event_image-image/72/c0/981165/article_image-image-article.jpg">
    </a>
</div>
<div class="item">
    <a href="#utekai">
    <img src="http://www.budyon.org/wp-content/uploads/2012/02/mumiitroll.jpg">
    </a>
</div>
<div class="item">
    <a href="#troll">
    <img src="http://rusrep.ru/images/texts/1002/10023053_pic1.jpeg">
    </a>
</div>

CSS 

div#container {
    width:100%;
    margin:25px;
}

div.item {
    width:240px;
    margin:10px;
    float:left;
}

div.item img {
    width:240px;
}

Javascript

    $(function(){
    $('#container').masonry({
      itemSelector: '.item'
    });
  });

（当然还有 JQuery 1.6 和砌体脚本，从 desandro.com 加载。）

任何帮助深表感谢。

更新

在 html 文件中看到的脚本。

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
//<![CDATA[ 
$(window).load(function(){
 $(function(){

    $('#container').masonry({
      itemSelector: '.item'
    });

  });
});//]]>  
</script>
4

1 回答 1

3

你在 jQuery 之前包括了砌体。按顺序包括它们：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>

由于它是一个 jQuery 插件，它需要在它之前加载 jQuery 才能工作。

于 2013-04-21T16:57:35.767 回答