かんたんに可変グリッドを実現できる「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

この記事もおすすめ
記事を書いている中の人
入江慎吾
デザインも開発もやっているフリーのエンジニアです。目標はプロダクトだけで生きていくこと。そのために学んだこと、実践したことをブログで発信中。朝5時に起きて午前中だけ働いています。午後からは読書と勉強にあてて自己スキルをのばし、さらに生産性を高めたいと考えてます。(もっと詳しいプロフィール
この記事をシェアする
  • このエントリーをはてなブックマークに追加
メールマガジンで新着記事をフォロー

 

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む
イリテクで開発したプロダクト
SPONSOR
こちらの記事もおすすめです