jQuery Masonryのことを調べていたら、同じように要素をレンガ状に並べるjQueryプラグインがありました。それが、「The Wookmark jQuery plugin」です。使い方も、jQuery Masonry同様にカンタンです。
WookmarkとMasonryの大きな違いは、Masonryはアニメーションで魅せるのに対し、Wookmarkはシンプルに並べ替えを行うだけです。そのくらいですかね。結果としての形はいっしょです。
「The Wookmark jQuery plugin」の使い方
ちょこっとコードを紹介します。
head内
まずはjQueryとWookmarkを読み込みます。で、どれをレンガ状に並べるのかも記述します。
[cc lang=”html”]
[/cc]
Wookmarkのダウンロードはこちらです。
GBKS/Wookmark-jQuery · GitHub
HTML
並べたい要素をulを使ってマークアップします。こんなカンジです。
[cc lang=”html”]
- ……..
- ……..
- ……..
- ……..
- ……..
- ……..
- ……..
オプション
指定できるオプションにはこんなのがあります。
| 項目 | 説明 |
|---|---|
| autoResize | ブラウザのサイズが変わったときに並べなおすか |
| container | 要素を含むコンテナを指定 CSSを効かせられます |
| offset | 各要素間の間隔を指定 デフォルトは2 |
| itemWidth | カラムの幅を指定 デフォルトは、一番最初に読み込んだ要素の幅 |
オプションを使いたいときは、こんなコードになります。
[cc lang=”JavaScript”]
$(‘.items li’).wookmark({
autoResize: true,
container: $(‘#myContent’),
offset: 5,
itemWidth: 200
});
[/cc]
ということで、Masonryとそっくりだけど、MasonryよりもシンプルなjQueryプラグイン「The Wookmark jQuery plugin」でした。
jQueryを勉強しましょう
htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねｗ でも、jQueryって、実はカンタンなんです。
でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。
なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします！
実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ！という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。
