かんたんに可変グリッドを実現できる「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です。
[sc name=”engeneer”]
SHARE
無料メルマガ
「好きなことで生きていく」をコンセプトに、ブログの新着コラムをお届けします。
無料メルマガ登録はこちら
PROFILE
入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 （詳しいプロフィール）
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 （詳しいプロフィール）
