2011年05月19日

jQuery:様々なサイズの要素をfloatさせて整列させるプラグインjQuery Masonry

様々なサイズの要素をfloatさせて整列させることの出来るプラグイン「jQuery Masonry」を使ってみました。
今回、色々なサイズの画像を詰めて並べたいと思ったらこんなプラグインがありました!
導入も簡単なので使いやすかったです。

参考にさせていただいたページはこちら。
http://desandro.com/demo/masonry/docs/

まず、jquery.jsとjquery.masonry.jsをダウンローし、下記のように読み込みます。
そして、main.jsに導入用のソースを書きます。

・index,htmlの内容

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/main.js"></script>

・・・

<div id="item" class="wrap">
 <div class="box col1">
  <img src="'img_thumb.jpg'" alt="" width="150" />
 </div>
 <div class="box col1">
  <img src="'img_thumb.jpg'" alt="" width="150" />
 </div>
</div>

・style.cssの内容

.wrap {
    margin-bottom: 20px;
    clear: both;
}

.box {
    position: absolute;
    float: left;
}

.col1 {
    width: 150px;
    margin: 0 0 0 7px;
    padding: 0 0 10px 0;
}

.col1 img {
    max-width: 150px;
}

.wrap:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

・main.jsの内容

$(function(){
 columnMasonry();
});

function columnMasonry(){
 $('#item').masonry({
  columnWidth: 163,
  singleMode: true,
  animate: true
 });
}

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/zasso77/51604260 

トラックバックはまだありません。

コメントはまだありません。

コメントする。

絵文字
 
星  顔