Skip to content →

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

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

組み込み方法

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

[sc name=”engeneer”]

SHARE

PROFILE

入江 慎吾
教える、学べるオンラインメンターサービスMENTAの代表 / 2-30個のサービスをつくり、M&Aで億単位の売却 / 受託開発20年→受託をやめサービス開発に専念→個人開発でつくったMENTAがヒット→ランサーズグループにジョイン / YouTubeで「サービスづくりで生きていく」配信中 / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)

SUBSCRIBE

メールマガジンに登録いただけると、ブログの新着記事をお知らせいたします。(励みにもなります!)また、YouTubeチャンネルでも個人開発・サービスについての情報を発信中です。

SPONSOR

Published in 開発奮闘記