0

私は現在、さまざまな画像の高さに対応するようにjquery masonryを取得しようとしていますが、機能したくありません。

CSS:

  #container {
    background-color:red;
    width:1000px;
    text-align:center;
    margin: 0 auto;
    }

    .item {

    float:left;
    margin:10px;
    width:275px;
    background-color:red;

}

Jクエリ:

  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script src="/jquery.masonry.min.js"></script>
<script>
$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 275
  });
});
</script>

HTML:

<div id="container">
<div class="item"><img src="/green"></div>

<div class="item"><img src="/purple"></div>

<div class="item"><img src="/green"></div>

<div class="item"><img src="/green"></div>

<div class="item"><img src="/purple"></div>

<div class="item"><img src="/green"></div>
 </div>

理想的な世界では、2 つの紫色の四角形が互いに下にあります。

興味深いことに、jquery の石積みを削除しても、何も変わりません。

4

1 に答える 1

0

上記のコメントで述べた HTML の問題を修正し、jQuery Masonry ファイルをロードする前に jQuery をロードすると、問題が解決されることが期待されます。

私の以前のコメント:

HTML ドキュメントを修正してみて、それが役立つかどうかを確認してください。STYLE タグは HEAD 内にある必要があり、終了 HEAD タグはありません。

于 2012-09-10T16:15:23.797 に答える