f:id:hkaz:20131230170644p:plain

作る必要性が出たのでちょっと書いてみる。

http://www.pinterest.com/
TopページのUIは多くの画像が、ある意味規則性なく並んでいる。

流し見をするにはいいUIということで、社内でゆくゆく公開される(?)サービスのトップページに利用しようと。

スマホ・タブレット対応をという要請もあったので技術力不足カバーと時間の短縮の為にTwitter Bootstrapを利用して作成。
なんか特殊なのかと戸惑ったものの、実はそんなことなかったという話。

 

利用するのはNHKで利用されて有名になったMasonry。

使い方が分かると使いやすい。

 

① jsのダウンロード

http://masonry.desandro.com/

 "Download these docs"からまとめて落とした方が何となく良いような気がする。
これくらいの実装で困らないよっていう人は"min.js"の方を落とせば良いと思う。

利用するのはその中の"masonry.pkgd.min.js"

 

② jQueryの準備

jQueryのページから引っ張ってくる(http://jquery.com/download/)かGoogleのHosted Libraryを活用する(https://developers.google.com/speed/libraries/devguide#jquery)か。

jQueryのページからだと、<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

を貼付けるか、

Download the compressed, production jQuery 1.10.2

から取ってくるか。

Googleを活用する時は

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>をつかう。

 

③Imgesloaded.js

画像が読み込まれる前にmasonryが動くと崩れることがあるので、画像を読み込んでからmasonryを動かしたいので、imagesloaded.jsを使う。

https://github.com/desandro/imagesloaded

ここの右カラムにあるDownload zipから取得。

使うのはimagesloaded.js

<script type="text/javascript" src="../js/imagesloaded.js"></script>

をhead内に記述。

 

④実装

<head>内のscriptはこんな感じ。

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script type="text/javascript" src="../js/bootstrap.min.js"></script>

    <script type="text/javascript" src="../js/masonry.pkgd.min.js"></script>

    <script type="text/javascript" src="../js/imagesloaded.js"></script>

 

maisonryを動かす為には、動かしたいところのwidthはどれくらいで・・・などの指定をしなければならないので、下記scriptをhtml内に記述。

<script>

var $container = $(#container);

    $container.imagesLoaded(function(){ //imagesLoadedを入れて崩れないように

    $(#container).masonry({ // id="container"の中の

        itemSelector : .item, // class="item"に対して適用

        columnWidth: 270, //一列の幅サイズを指定

        isAnimated: true, //スムースアニメーション設定

        isFitWidth: true, //親要素の幅サイズがピッタリ

    });

});

</script>

 

cssは

.item {

    width: 250px;

    margin: 10px;

    float:left;

}

 

大事なのは

columnWidth = .itemのwidth+margin*2になっているかどうか。

上の例だと

270 = 250 + 10*2

となっているので、綺麗に動いてくれる。

じゃないと崩れる・・・

script内に記述しているオプションとしては

 isAnimated: true, //スムースアニメーション設定

 isFitWidth: true, //親要素の幅サイズがピッタリ

だけどこれくらいは入れた方が良いと思う。

他のオプションについては個人の自由でおkかと。

 

参考:オプションたち

itemSelector

整列対象のclass名を指定する。.gridと記述すれば「grid」が整列対象になる。

isAnimated

ウインドウサイズを変更したときにブラウザの幅に合わせて移動するアニメーションが実行される。trueまたはfalseを指定する。

isFitWidth

全体を中央に寄せる。trueまたはfalseを指定する。これとは別に、cssで基本となるボックス(grid)を囲むdiv(center)にセンタリングさせる記述をする必要がある。

isRTL

右上から左下に向かって並べたい場合に指定する。trueまたはfalseを指定する。

columnWidth

一列の幅サイズを指定する。これを使わずcssで指定することもできる。

isFitWidth

親要素の幅サイズがピッタリになる。trueまたはfalseを指定する。

gutterWidth

整理される要素間の溝の幅を指定する。数値を指定する。

containerStyle

親要素にスタイルを追加できる。

isResizable

ウィンドウサイズが変更された時に並び替えするかしないか。trueまたはfalseを指定する。

animationOptions

アニメーションオプションを指定する。

 

とこんな感じ。

これで最低限動くかと。

 

「こんな風にしたい!」

って思った時に、だいたいは探したら見つかるんですよね。

凄い便利な世の中です。

というか、便利にしてくれているエンジニアの方々に頭が上がらないなぁと思う次第です。