Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

グリッドレイアウトを簡単に行うJavaScript!Masonry.js

3,889 views

Published on

グリッドレイアウトをMasonry.jsを使って実施してみました。

高さの違うアイテムを自動的に再配置して、グリッドレイアウトしてくるJavaScriptライブラリです。

また、スマートフォンデバイス、タブレットデバイスなどにも自動でレイアウトが行われるので非常に配置がしやすいです。

BootsStrapで組み合わせると非常に早く、高機能なレイアウトが作成できます。

Masonryのどのあたりが便利なのかに重点をおいて説明してみました。

Webページでのスライドは以下になります。
http://ticklecode.com/present/140309_jscafe_Masonry/

Published in: Technology
  • These are one of the best companies for review articles. High quality with cheap rates. ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ I highly recommend it :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

グリッドレイアウトを簡単に行うJavaScript!Masonry.js

  1. 1. MASONRY.JSについて話すよ (#^.^#) ~今日の目次~ 自己紹介 こんな人向けのお話 グリッドレイアウト Bootstrapでやってみる Masonryでやってみる
  2. 2. 自己紹介
  3. 3. 自己紹介 元々、12年間ぐらい生産管理システム、 会計システムのSE インターネットと隔離された環境から、 2011年10月Web制作へ! 昼は、京橋の某社で Web制作(WordPress,js,PHP,Ruby)の担当
  4. 4. 自己紹介 Twitter:@AsbyuKobayashi ブログ:http://iao.wktktravel.com/ ブログ書いたり、自社サービス作ったり、 制作案件したりしてます。
  5. 5. 自己紹介 2013年 WordCamp Tokyo 制作チームにスタッフ参加 2014年もスタッフ参加します(@^^)/~~~
  6. 6. 今日は、こんな人向けのお話 デザインに「キレ」がほしい エンジニアでもかっこよく 経験浅いけど、「おおおっ!」と思ってほしい
  7. 7. グリッドレイアウト かっこいい
  8. 8. グリッドレイアウト かっこいい!!興奮する!!!
  9. 9. グリッドレイアウト すっきりした感じがたまらない!!
  10. 10. グリッドレイアウト 見とれる!
  11. 11. グリッドレイアウト やってみる!!
  12. 12. TWITTER BOOTSTRAP(CSS)でやってみる! サンプル作った!できた!! BTSP01.HTML レスポンシブにも対応!!
  13. 13. Twitter Bootstrap(CSS)でやってみる! 次、これはどう!? BTSP02.HTML カラムやイメージのサイズが異なる。 これもでけた!・・・・???
  14. 14. Twitter Bootstrap(CSS)でやってみる! なにかおかしい。 次のカラムが詰まらない。 前の要素の高さを超えれない。 CSS(FLOAT)レイアウトの限界
  15. 15. Twitter Bootstrap(CSS)でやってみる! FLOATがダメならPOSITIONレイアウト JAVASCRIPTで計算してやる 再度、みてみる。 BTSP02.HTML
  16. 16. Twitter Bootstrap(CSS)でやってみる! いや、まてまてまて。 positionの計算がメンドイ。 レスポンシブでの再配置の考慮も必要 やはり、限界・・・・
  17. 17. ようやく、救世主 登場! MASONRY.JS !!
  18. 18. Masonryでやってみる! MASONRY.JS を使うとこうなる! http://sakurashinmachi-potal.com/post-hear.php
  19. 19. Masonryでやってみる! 公式サイト http://masonry.desandro.com/ ダウンロードして、READ! <cittp=tx/aacit sc"i/aor/aor.i.s>/cit srp ye"etjvsrp" r=lbmsnymsnymnj"<srp>
  20. 20. Masonryでやってみる! レイアウト例とコード例 上手く配置されないときは、columWidthが原因のときが多い!
  21. 21. Masonryでやってみる! IMAGESLOADED.JS が重要 完全にロードが終わってからレイアウトを再配置させる イメージのheightを確保する。
  22. 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. 23. まとめ グリッドレイアウトは、アイテムのHIGHTが キモ hightが同じ場合は、CSS(float)だけでOK! hightが異なる場合は、Masonry.jsなどで、positionを計算! imagesloaded.jsでイメージのロードが終わってから配置させる! Twitter Bootstrap + Masonry.js の組み合わせは最速!最強! MASONRY.JSの使い方は、以下のサイトの ソースを見てもらうとわかると思います。 http://sakurashinmachi-potal.com/post-hear.php
  24. 24. おわり

×