Question

我让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'
    });
  });

（当然还有来自desandro.com的JQuery 1.6和砌体脚本。）

非常感谢任何帮助。

更新

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>

Answer 1

你在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才能工作。

Jquery Masonry在本地不起作用，但在jsFiddle上工作得很好

1 个答案: