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

  • このエントリーをはてなブックマークに追加
2012/09/13 (2016/09/14更新) カテゴリー:開発奮闘記 タグ: , ,

ウィンドウサイズに合わせてコンテンツが可変する可変グリッド。自分でつくろうとすると大変ですが、この機能をかんたんに組み込める「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

  • このエントリーをはてなブックマークに追加
SPONSOR
IRITECはITエンジニアが「コンテンツで集客・広告収入を得る」「お客様の話をきいて価値を提案できる」 「自分で考えたアプリで収益を上げる」など、エンジニアが生き残っていくための情報をお届けしているビジネスハックメディアです。

無料メールマガジンを購読すると特典があります!

COMMENT

コメントをどうぞ

RELATION

関連する記事

RECOMMEND

おすすめの記事

SPONSOR

TAG

タグから記事をさがす

PROFILE

イリテクのプロフィール

イリテクはWEBシステム・スマホアプリ開発を得意とする制作会社です!
入江 慎吾/イリテク株式会社 代表取締役
1982年生まれ。長崎県 五島列島出身。福岡のWeb制作会社で10年間、ディレクション、Webデザイン、システム開発に従事。 その後、趣味で始めたiPhoneアプリ開発をきっかけにフリーランスとして独立後、2014年にイリテク株式会社として法人化。(もっと詳しいプロフィール)
SPONSOR

PRODUCT

イリテクで開発したプロダクト