グリッドレイアウトをMasonry.jsを使って実施してみました。 高さの違うアイテムを自動的に再配置して、グリッドレイアウトしてくるJavaScriptライブラリです。 また、スマートフォンデバイス、タブレットデバイスなどにも自動でレイアウトが行われるので非常に配置がしやすいです。 BootsStrapで組み合わせると非常に早く、高機能なレイアウトが作成できます。 Masonryのどのあたりが便利なのかに重点をおいて説明してみました。 Webページでのスライドは以下になります。 http://ticklecode.com/present/140309_jscafe_Masonry/

1. MASONRY.JSについて話すよ
(#^.^#)
～今日の目次～
自己紹介
こんな人向けのお話
グリッドレイアウト
Bootstrapでやってみる
Masonryでやってみる

2. 自己紹介

3. 自己紹介
元々、12年間ぐらい生産管理システム、
会計システムのSE
インターネットと隔離された環境から、
2011年10月Web制作へ！
昼は、京橋の某社で
Web制作(WordPress,js,PHP,Ruby)の担当

4. 自己紹介
Twitter:@AsbyuKobayashi
ブログ:http://iao.wktktravel.com/
ブログ書いたり、自社サービス作ったり、
制作案件したりしてます。

5. 自己紹介
2013年 WordCamp Tokyo 制作チームにスタッフ参加
2014年もスタッフ参加します(@^^)/~~~

6. 今日は、こんな人向けのお話
デザインに「キレ」がほしい
エンジニアでもかっこよく
経験浅いけど、「おおおっ！」と思ってほしい

7. グリッドレイアウト
かっこいい

8. グリッドレイアウト
かっこいい!!興奮する！！！

9. グリッドレイアウト
すっきりした感じがたまらない！！

10. グリッドレイアウト
見とれる！

11. グリッドレイアウト
やってみる！！

12. TWITTER BOOTSTRAP(CSS)でやってみる!
サンプル作った！できた！！
BTSP01.HTML
レスポンシブにも対応！！

13. Twitter Bootstrap(CSS)でやってみる!
次、これはどう！？
BTSP02.HTML
カラムやイメージのサイズが異なる。
これもでけた！・・・・？？？

14. Twitter Bootstrap(CSS)でやってみる!
なにかおかしい。
次のカラムが詰まらない。
前の要素の高さを超えれない。
CSS（FLOAT)レイアウトの限界

15. Twitter Bootstrap(CSS)でやってみる!
FLOATがダメならPOSITIONレイアウト
JAVASCRIPTで計算してやる
再度、みてみる。
BTSP02.HTML

16. Twitter Bootstrap(CSS)でやってみる!
いや、まてまてまて。
positionの計算がメンドイ。
レスポンシブでの再配置の考慮も必要
やはり、限界・・・・

17. ようやく、救世主 登場!
MASONRY.JS !!

18. Masonryでやってみる!
MASONRY.JS を使うとこうなる！
http://sakurashinmachi-potal.com/post-hear.php

19. Masonryでやってみる!
公式サイト
http://masonry.desandro.com/
ダウンロードして、READ!
<cittp=tx/aacit sc"i/aor/aor.i.s>/cit
srp ye"etjvsrp" r=lbmsnymsnymnj"<srp>

20. Masonryでやってみる!
レイアウト例とコード例
上手く配置されないときは、columWidthが原因のときが多い!

21. Masonryでやってみる!
IMAGESLOADED.JS が重要
完全にロードが終わってからレイアウトを再配置させる
イメージのheightを確保する。

22. Masonryでやってみる!
スマホ時の注意点
画面幅が狭いと、上手くレイアウトされない。
ある程度、幅が狭くなったときは、Masonry.jsを無効にする
vrmnwdh=60 / iaの縦の横幅
a i_it
0; / Pd
$"cnanr)iaeLae(ucin)
(#otie".mgsoddfnto({
/ 横幅
/
i ((idw.neWdh)< mnwdh{
f $wno)inrit( = i_it)
$
(
/ msny
/ aorでのレイアウトを停止
"cnanr)msny'eto';
#otie".aor(dsry)
}
};
)
スマホのときは個別にCSSレイアウトで調整する。

23. まとめ
グリッドレイアウトは、アイテムのHIGHTが
キモ
hightが同じ場合は、CSS（float）だけでＯＫ！
hightが異なる場合は、Masonry.jsなどで、positionを計算！
imagesloaded.jsでイメージのロードが終わってから配置させる！
Twitter Bootstrap + Masonry.js の組み合わせは最速！最強！
MASONRY.JSの使い方は、以下のサイトの
ソースを見てもらうとわかると思います。
http://sakurashinmachi-potal.com/post-hear.php

24. おわり