CSS Layout API で Masonry Layout | blog.jxck.io

2020/12/03 12 users API jxck.io CSS Layout height

Intro Pinterest でおなじみの Masonry Layout を CSS の標準にする作業と実装が進んでいる。 Masonry Layout 以下のように画像を敷き詰めるタイルレイアウトのことを Masonry (石工やレンガ造りの意味らしい) Layout という。 上の例の場合は、 Height が不揃いの画像を並べる上で、左から敷き詰め、折り返したら既にあ... 続きを読む

[JS]jQueryのMasonry風レイアウトをスタイルシートで簡単に調整できるスクリプト -Salvattore | コリス

2013/09/02 72 users jQuery コリス スクリプト スタイルシート 間隔

高さの異なるパネルをレンガ状に一定の間隔で配置するjQueryのプラグイン「Masonry」風レイアウトを簡単に実装できるように、スタイルシートで調整できるスクリプトを紹介します。 スタイルシートベースなので、レスポンシブ対応もMedeia Queriesを利用できます。 Salvattore Salvattore -GitHub Salvattoreのデモ Salvattoreの使い方 Salv... 続きを読む

グリッドレイアウトを実装できるjQueryプラグイン総まとめ - W3Q - Web制作者のお悩み解決サイト

2013/07/25 29 users グリッドレイアウト タイル状 プラグイン W3Q WEB制作者

グリッドレイアウトを実装できるjQueryプラグイン総まとめ パネルをタイル状に敷き詰めるプラグイン / Masonry / Grid-A-Licious他...全10件 続きを読む

[JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js | コリス

2013/06/17 86 users コリス jQuery Isot スクリプト 間隔

画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Mason.js Mason.js -GitHub Mason.jsの特徴 Mason.jsのデモ Mason.jsの使い方 Mason.jsの特徴 Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。 他のスクリプト（Masonry, Isot... 続きを読む

[JS]変更時のアニメーションが気持ちいい、レスポンシブ対応のかっこいいグリッドを生成するスクリプト -Grid—A—Licious | コリス

2012/10/18 141 users コリス jQuery スクリプト アニメーション プラグイン

Masonryはかっこいいけどパネル移動のアニメーションがちょっとな、という人にぴったりな、レスポンシブ対応でレイアウト変更時のアニメーションもスムーズでかっこいいグリッドを生成するjQueryのプラグインを紹介します。 Grid—A—Licious Grid—A—Licious -GitHub Grid—A—Liciousのデモ Grid—A—Liciousの使い方 Grid—A—Licious... 続きを読む

要素をレンガ風に配列するスクリプト・jQuery Masonryで、配列させる要素を下揃えにする - かちびと. net

2012/02/24 81 users レンガ風 net 要素 jQuery 時系列

要素をレンガ風に配列するjQueryプラグイン のMasonryで、要素を下揃えに配置出来るよ うにしたい、という内容です。オプション 項目を追加してオンオフを出来るようにカス タマイズします。下揃えにする機会があるか どうかは置いといてｗ jQuery Masonryというのは要素を時系列を崩さずに配列させる事が可能なjQueryのプラグインです。以前少し記事書いたので合わせてご覧下さい。 ボッ... 続きを読む

CSSのみで約900パターンものユニークなグリッドレイアウトをドラッグ&ドロップで作成出来るWebサービス・3x4grid - かちびと. net

2012/01/09 329 users グリッドレイアウト CSSジェネレーター CSS パズル 休日

3連休を如何お過ごしでしょうか。さて、 ちょっと面白いものを見かけたのでシェア します。Masonryのようなレンガ風の レイアウトをCSSのみでサクッと作れる Webサービス。パズルのように組み合わせ るので種類は900パターン近くになる そうですよ。 休日なので軽めの話題でも。 よくあるグリッドレイアウトのCSSジェネレーターと違って汎用性はありませんが、こういうサービスが出てきたのがちょっと... 続きを読む

アニメーションでレイアウトを変更するMasonryを使ったポートフォリオのテンプレート | コリス

2011/08/08 46 users jQuery コリス キャプチャ ポートフォリオ CSS

Masonryは以前紹介した「パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry」のjQueryのプラグインで、パネルをグリッド状に配置し、ブラウザのサイズを変更すると、それに合わせてアニメーションでパネルの配置を変更します。 スライドショー時のキャプチャ 実装 ダウンロードファイルには、HTML, JS, CSSなど一式が揃っています。 コンテンツは必要な箇所のみ変更するだけ... 続きを読む

グリッドに配置された画像にマウスオーバーした際に十字ハイライトさせるjQueryプラグイン - かちびと.net

2011/06/23 51 users グリッド 十字 jQueryプラグイン マウス パクト

個人的に好きなタイプのjQueryの使い方 だったのでメモ。イメージギャラリーは、こ ういったエフェクトも大事な要因ですし、 参考にしておきたい所です。なかなかイン パクトもあって素敵ですね。尚、グリッドは Masonryを使っています。 基本的にはユーザーの利便性を高める目的でjsを使いたいですけど、視覚的にインパクトを与えられるのも利点の一つかなとは思います。 Animating with M... 続きを読む