啓文社 - 2014.04.15　[jQuery] タイル表示

トップ > 2014年 > 2014.04.15　[jQuery] タイル表示

[jQuery] タイル表示
2014.04.15記

ブロックを要素をタイル表示し、行毎に高さを揃えるjQueryのプラグインを試してみます。
http://urin.github.io/posts/2013/release-jquery-tile-js/

1-1

1-2
1-2
1-2

1-3

1-4

2-1

2-2

2-3
2-3
2-3
2-3

2-4

3-1

3-2

3-3

3-4
3-4

4-1
4-1
4-1
4-1
4-1

4-2

4-3

4-4

5-1

5-2

5-3

5-4
5-4
5-4
5-4
5-4
5-4
5-4

HTML


<div class="tile">1-1</div>
<div class="tile">1-2<br>1-2<br>1-2</div>
<div class="tile">1-3</div>
<div class="tile">1-4</div>

<div class="tile">2-1</div>
<div class="tile">2-2</div>
<div class="tile">2-3<br>2-3<br>2-3<br>2-3</div>
<div class="tile">2-4</div>

<div class="tile">3-1</div>
<div class="tile">3-2</div>
<div class="tile">3-3</div>
<div class="tile">3-4<br>3-4</div>

<div class="tile">4-1<br>4-1<br>4-1<br>4-1<br>4-1</div>
<div class="tile">4-2</div>
<div class="tile">4-3</div>
<div class="tile">4-4</div>

<div class="tile">5-1</div>
<div class="tile">5-2</div>
<div class="tile">5-3</div>
<div class="tile">5-4<br>5-4<br>5-4<br>5-4<br>5-4<br>5-4<br>5-4</div>

CSS


<style type="text/css">
.tile { 
    border:1px solid #999; 
    background:#f0f0f0; 
    float:left; 
    width:130px; 
    margin:0 10px 10px 0; 
}
</style>

JavaScript


<script src="jquery-2.1.0.min.js"></script>
<script src="jquery.tile.js"></script>
<script type="text/javascript">
$(function(){
  $('.tile').tile(4);
});
</script>

このプラグイン「jquery.tile.js」簡単でよいです。

次回にはこのタイルをドラッグ＆ドロップで並べ替えるっていうのがやれるようにしたと思います。

この記事の1行目に飛ぶ

2014.05.15　[jQuery] タイルをドラッグ＆ドロップ

2014年

2014.03.15　MVNO(2)