MasonryとInfinitescrollでPinterest風一覧ページを作る | 埼玉のWebコンサルタント ColdSleep Works
（投稿日：2014年05月29日） 最近カメラがマイブームなので、WordPressを使ってフォトログを作成してみました。jQueryの「Masorny」と「Infinitescroll」を使って今をときめく（？）Pinterest風になっています。 完成したサイトはこちら、Snap of the Deadです。 Pinterest風のタイルレイアウトなら、横長の写真と縦長の写真やアスペクト比の違う写真が混在してもキレイに整列してくれます。また、端末サイズが変わってもタイルの配置パターンを変えれば簡単に対応できます。 Pinterest風の一覧ページの作り方 タイル風のレイアウトはjQueryのMasonryを使い、それに無限スクールのInfinitescrollを組み合わせて作ります。 まずは各スクリプトを読み込みます。 <script src="//code.jquery.com/jq
[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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
