無料でビットコインをもらえるのは、ビットフライヤー

[み]jQuery Masonryのように要素をレンガ状に並べるjQueryプラグイン「The Wookmark jQuery plugin」

jquery

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”]

  • ……..
  • ……..
  • ……..
  • ……..
  • ……..
  • ……..
  • ……..
[/cc] Masonryとはマークアップの仕方が若干違いますね。

オプション

指定できるオプションにはこんなのがあります。

項目説明
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って聞くとなかなか手がでない… そんな方はきっとたくさんいますよねw でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします!

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です