HOME > 開発メモ > かんたんに可変グリッドを実現できる「jQuery Masonry」
2012/09/13 (2016/09/14更新) タグ: , ,

かんたんに可変グリッドを実現できる「jQuery Masonry」

  • このエントリーをはてなブックマークに追加

ウィンドウサイズに合わせてコンテンツが可変する可変グリッド。自分でつくろうとすると大変ですが、この機能をかんたんに組み込める「jQuery Masonry」というものがあります。オプションも必要最低限揃っていてカスタマイズもできちゃいます。

SPONSOR

組み込み方法

1. jQuery Masonryをダウンロード

サイトからjQuery Masonryをダウンロードします。

2. 組み込み

jQuery本体ファイルと、jQuery Masonryをヘッダで読み込んだ後に下記コードを入れます。

$(function(){
	$('#alphas').masonry({
	  itemSelector: '.box',
	  columnWidth: 265,
	  isAnimated: true
	});
})

#alphasの中に可変させたいコンテンツを格納します。itemSelectorは格納するBOXのクラスやID名。columnWidthは、格納するBOX幅のサイズです。isAnimatedはウィンドウサイズが変わった時にアニメーションで移動させるかどうかのフラグです。後はCSSを調整するだけでOKです。

jQuery Masonry

この記事をシェアする
  • このエントリーをはてなブックマークに追加

SPONSER

こちらの記事もおすすめです

お役にたちましたら、メール購読もどうぞ!

 

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む
イリテクのプロフィール
入江 慎吾
System & Design Developer。イリテク株式会社 代表取締役。自社企画でクラウド見積請求書作成サービス「CLOUD PAPER」を開発・運営。仕様を決めずに少ない予算でも開発をスタートできる「開発までできるシステム顧問サービス」を実施中。(もっと詳しく
開発したWebサービス
開発したアプリ
新着記事
カテゴリ/タグ
SPONSER