jqueryでタイルレイアウトをしたい
最近、デジタルコンテンツ販売のサイトを運営し始めました。このとき思ったのが、「ある一定領域のなかであれば、どれだけボックス要素（サムネイルと商品名）を増やしても、自動でうまい具合に流し込みたい」ということでした。
なぜなら、通常のリストだけでは敷き詰められたボックス要素が横幅を超えると「横幅いっぱいになったから次にズレそう」といのをしてくれなくて横一列に詰めまくってレイアウトが崩れてしまうからです。
これを回避するには、何個かのボックス要素ごとにリストタグを追加しないといけません。とても面倒ですよね。そこでいくつか探していると、masonry（メーソンリー？マソンリー？）がjqueyでタイルレイアウトをやるのに簡単で設定しやすいということがわかったので、画像とテキストをセットにしてタイルレイアウトさせる方法を紹介します。
ファイルパスの指定方法は、絶対パスと相対パスの2つがあります。今回は、絶対パスのほうで指定します。絶対パスと相対パスの違い
masonryの使い方
1、インストール
まずは、masonryをインストールします。Masonryから、Download masonry pkgd.min.jsか、Download these docsのどちらかをインストールします。私は後者でやったので後者のほうで説明していきます。
Download these docsのzipファイルを解凍すると「masonry-docs」というフォルダのなかにhtmlファイル、cssファイル、jsファイルが入っていることを確認してください。ファイルサイズが縮小されている「min.js」はjsフォルダの中に入っています。
2、2つのスクリプトをコードに読ませる。
タイルレイアウトを表現したいhtmlファイルのヘッダーに2つのスクリプトを読ませます。
<!DOCTYPE html>
<head>
<script src="/js/masonry.pkgd.min.js"></script>
<script>
$(window).load(function() {
$('.list').masonry({
itemSelector: '.list-box',
isFitWidth: true
});
});
</script>
</head>
<body>
</body>
上から2つ目のスクリプトは、クラス名「list」という領域のなかにあるクラス名「list-box」のボックス要素をタイルレイアウトさせますという意味です。
3、必要なクラス名で骨組みを作る。
まず、htmlタグでクラス名「list」とクラス名「list-box」を作ります。
<!DOCTYPE html>
<head>
<script src="/js/masonry.pkgd.min.js"></script>
<script>
$(window).load(function() {
$('.list').masonry({
itemSelector: '.list-box',
isFitWidth: true
});
});
</script>
</head>
<body>
<div class="list">
<div class="list-box">
</div>
<div class="list-box">
</div>
<div class="list-box">
</div>
</div><!-- リスト-->
</body>
4、クラス名「list-box」の中に画像とテキストを入れる。
タイルレイアウトさせる要素であるクラス名「list-box」にdivタグで画像とテキストをそれぞれ入れます。
<!DOCTYPE html>
<head>
<script src="/js/masonry.pkgd.min.js"></script>
<script>
$(window).load(function() {
$('.list').masonry({
itemSelector: '.list-box',
isFitWidth: true
});
});
</script>
</head>
<body>
<div class="list">
<div class="list-box">
<div class="list-img"><a href="#"><img src="#" alt="サムネイル画像1"></a></div>
<div class="list-text">
<p>タイトル1</p>
</div>
</div>
<div class="list-box">
<div class="list-img"><a href="#"><img src="#" alt="サムネイル画像2"></a></div>
<div class="list-text">
<p>タイトル2</p>
</div>
</div>
<div class="list-box">
<div class="list-img"><a href="#"><img src="#" alt="サムネイル画像3"></a></div>
<div class="list-text">
<p>タイトル3</p>
</div>
</div>
</div><!-- リスト-->
</body>
*「スクリプトに画像とテキストのクラス名は無いけど良いのか？
A、クラス名「list-box」に囲われているので問題ありません。
5、CSSでデザインする。
以下のCSSをベースにPCとスマホで分けてください。
/*タイルレイアウトを動かす領域の大きさ*/
.list{
width:100%;
}
/*タイルレイアウト上下左右の余白*/
.list-box{
margin: 任意;
}
/*サムネイル画像を固定サイズにしたいなら無くてもok*/
.list-img {
max-height: 任意;
}
/*画像の大きさ widthは必須。heightを指定すると高さが異なるタイルレイアウトにはなりません。*/
.list-img img {
width: 任意;
height: 任意;
}
/*テキストエリアの大きさ*/
.list-text{
width: 任意;
}
/*テキストの属性など*/
.list-text p {
color: #000;
font-size: 任意;
margin-right: 任意;
}
使ってみての感想
画像とテキストにdivタグを使わないでやってみると、うまく動いてくれなかったのでdivタグを使うのが良いと思います。
参考サイト