jQueryプラグイン「Isotope」まとめ - Qiita
$('親要素のid or クラス名').isotope({ itemSelector: '動かす要素のクラス名', percentPosition: true, masonry: { columnWidth: '動かす要素の横幅(クラス名でもよい)' } }); masonry(columnWidth)の設定をしているのはなぜか？ 要素の横幅に関わらず、カラムの横幅を設定できる。 [注意点] 実際の要素の横幅:500px columnWidthの指定:100px 上記の場合、columnWidthは上書きされて、要素500pxが表示されるので注意。 サンプル ブラウザサイズ(横幅)によって要素の並びが変わる 横幅1000px 横幅500px <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>masonry layout
最近また増えてきた可変グリッドレイアウトのjQueryプラグインまとめ 2012年9月 | webrecuration:IT/Webデザイン系ブログ
可変グリッドレイアウトとは、ボックスをタイル状に並べるプラグイン…っておなじみですね。Pinterestやfacebookのタイムラインにも採用されています。基本的にこのレイアウトの実装はmasonry.js一強な感じだったのですが最近またあたらしく登場してきたのでご紹介。 Masonry.js まずは一番流行しているMasonryから。日本語の解説もいっぱいあるのでだいぶ安心です。 無限スクロールを実装するInfiniteScrollと組み合わせた例。 ボックス要素を綺麗に整列出来るjQueryプラグイン・jQuery MasonryにInfinite Scroll（無限スクロール）機能を加えたサンプル – かちびと.net WordPressのデフォルトテンプレートであるTwentyElevenに導入した例。WordPressではそのままだとうまくいかないようです。 WordP
Isotope · Filter & sort magical layouts
Install Download isotope.pkgd.js un-minified, or isotope.pkgd.min.js minified CDN Link directly to unpkg. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <!-- or --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
