[JS]エレメントをグリッド状にランダムに配置したり、Pinterest風に配置するスクリプト - BlocksIt.js
BlocksIt.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 ※jQueryは1.7.1で開発。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="text/javascript" src="blocksit.js"></script> Step 2: HTML HTMLは対象となる範囲をラッパーで包み、各パネルを同列に配置します。 パネルはデフォルトでdiv要素を対象にしていますが、任意の要素で実装できます。 <div id="container"> <div>パネル</div> <div>パネル</div> <div>パネル</div
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> <script type="text/javascript" src="freewall.js"></script> </head> Step 2: HTML カードを包むラッパーを用意します。 <div id="freewall" class="free-wall"> </div> Step 3: JavaScript デモでは、各カードをスクリプトで生成してレイアウトを作成しています。 <sc
[JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js
画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Mason.js Mason.js -GitHub Mason.jsの特徴 Mason.jsのデモ Mason.jsの使い方 Mason.jsの特徴 Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。 他のスクリプト（Masonry, Isotopeなど）グリッドのレイアウトを使う時に生まれる隙間や端にも穴がない状態でレイアウトすることが可能です。 類似スクリプトで生じる隙間も埋めます。 比率 全てのエレメントのベースとなる比率を設定 サイズ グリッドに応じたサイズを設定 カラム 複数のブレイクポイントごとにカラムを設定 フィルター 空白スペースを埋めるための要素を設定 ガター エレメント間の溝を設定 Mason.jsのデモ ページには
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
