jQuery Masonryを使いたいんだけど

  • このエントリーをはてなブックマークに追加
  • LINEで送る

jQuery Masonryってのは、grid-a-liciousみたいにdivをタイルみたいに並べるやつ。
jQuery Masonry demo

htmlのhead内で次の2ファイルを読み込んで
[html]
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.masonry.js"></script>
[/html]
下のソースみたいのをbody内に書いて
[html]
<div id="primary">
<div class="box">ボックスボックスボックス</div>
<div class="box">ボックスボックスボックスボックスボックスボックスボックスボックスボックスボックスボックスボックスボックスボックスボックス</div>
<div class="box">ボックスボックスボックス</div>
</div>
[/html]
cssはこんな感じ。
[css]
#primary {
width:870px;
}
.box {
width:200px;
float:left;
background:#f33;
border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
[/css]
最後にBasic Examplesのページに書いてあったのを追加してみるけど。
[js]
$(‘#primary’).masonry({
columnWidth: 100,
itemSelector: ‘.box’
});
[/js]

普通に.boxをfloatした時と同じ表示にしかならない。
何を間違ってるんだろう(´;ω;`)ウウッ…

functionで囲んだら動いた。

[js]
$(function(){
$(‘#primary’).masonry({
columnWidth: 100,
itemSelector: ‘.box’
});
})
[/js]
jQueryはそうやって使うのがデフォだから、わざわざexampleには記述されてない?
わからん( ´・_・`)

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.