サムネイル画像の整列表示にjQuery Masonry
Read More
jQueryを使った、ちょっと変わったサムネイル画像の表示方法。
デモを見れば説明不要かと。
■デモページ
http://xirasaya.com/demo/1/
■必要なものは以下の2点
jquery.masonry.js
jquery-1.6.1.min.js
以下のサイトからそれぞれダウンロードできる
■jQuery Masonry : Download
http://masonry.desandro.com/
■jQuery : Download
http://jquery.com/
ここでは使い方の説明はしない。
つーかデモソース見た方が早い。
キモは、
内側の各ブロックを覆っている大外の要素に対してoverflow:auto;を指定することと、内側のブロックをfloat:left;しておくこと。
なお、デモではjQuery Masonryからダウンロードしたjquery.masonry.jsとは違うjsファイルを使用している。
この為、オプションの指定が本家のそれとは違うかもしれない点に注意すること。
普通にfloatを使ったものとは見た目も挙動も違うので、変わり種の提案として使えるかも知れない。
デモを見れば説明不要かと。
■デモページ
http://xirasaya.com/demo/1/
■必要なものは以下の2点
jquery.masonry.js
jquery-1.6.1.min.js
以下のサイトからそれぞれダウンロードできる
■jQuery Masonry : Download
http://masonry.desandro.com/
■jQuery : Download
http://jquery.com/
ここでは使い方の説明はしない。
つーかデモソース見た方が早い。
キモは、
内側の各ブロックを覆っている大外の要素に対してoverflow:auto;を指定することと、内側のブロックをfloat:left;しておくこと。
なお、デモではjQuery Masonryからダウンロードしたjquery.masonry.jsとは違うjsファイルを使用している。
この為、オプションの指定が本家のそれとは違うかもしれない点に注意すること。
普通にfloatを使ったものとは見た目も挙動も違うので、変わり種の提案として使えるかも知れない。
Category "jQuery" の最新記事
- [jQuery]たった１行でHTML文字列をサニタイズし改行コードはbrタグに置き換えする (0)
- [jQuery]checkboxのチェックが入った行の背景を変える (1)
- [jQuery]checkboxかradioかを調べる (0)
- [jQuery]tableのtdをクリックしてcheckboxにチェックを入れる方法 (4)
- [jQuery]テキストを効果的に表示するTextualizer (0)
- jQuery dataとattrで値が変わる…らん！ (4)
- [jQuery]$.ajax()を使った時にsubmitボタンのnameが飛ばない (0)
- [jQuery]簡単なカウントダウンの実装 (7)
- [jQuery]画面をスクロールしたときにサイドバーの要素を追尾させる方法 (0)
- 複数画像をスクロールさせるjQueryプラグイン｢Smooth Div Scroll｣ (0)