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

(もちろん、desandro.com からロードされた JQuery 1.6 と masonry スクリプトもあります。)

どんな助けでも大歓迎です。

アップデート

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 に答える