CSSだけで簡単にPinterest風味なカラムレイアウトするやつ

PinterestとかいうSNSがあるみたいです。

なんかオシャレ系？ な写真共有系SNS？ みたいな感じっぽいです。
段組みみたいになってるレイアウトがちょっと前にもてはやされてたりとかしてた気がします。

例によって、あの手のレイアウトはjQueryプラグインで簡単に実現なんだぜみたいな感じっぽいですが、CSS3のcolumnという機能によってCSSだけで比較的簡単に実現出来るっぽいみたいな感じみたいなんでちょっとサンプル作ってみました。
なおレイアウトの関係上、スマホだとただ一列表示されるだけみたいな感じになるのでタブレット以上の解像度あったほうがいいです。

ちなみにPinterest風な配置ってのは以下の写真みたいなアレです。

サンプルは hachibeeDI/css-only-column-layout · GitHub に作りました。
ニンジャスレイヤーのウキヨエタグに投稿された画像を漫然と眺めるような感じです。閲覧行為重点な。

gh-pagesを使ってるので、動作は http://hachibeedi.github.io/css-only-column-layout/ で見れます。
twitterAPIを使うのは初めてなので認証とか制限とかよくわかんないんですけども、そんなに閲覧数あるブログでもないんで全然いけるんじゃないかなと思います。うまく表示されなかったりしたらリロード行為したりするといいんじゃないかな？

ざっくりCSSの説明いきます。

まず、カラムを作りたい要素の親に'tweets--wrapper'というクラスがあるとします。

.tweets--wrapper {
    position: relative;
    -webkit-column-count: 4;
    -webkit-column-gap: 5px;
    -webkit-column-fill: auto;
    -moz-column-count: 4;
    -moz-column-gap: 5px;
    -moz-column-fill: balance;  /* FFはbalanceにしないとダメなのナンデ？ */
    column-count: 4;
    column-gap: 5px;
    column-fill: auto;
    text-align: center;
}

column-countは、何列のカラムを作るかです。
jQueryだと画面サイズとかから自動で出してくれたりとか系のがあると思うんですけど、CSSはそんな機能なんてないのでmediaqueryを使ってあげる必要があります。mediaqueryは後で説明します。

column-gapはカラム間のスペースです。

column-fillは、カラムをどういう風に配置していくかで、

• balance はカラム同士の高さを均等に
• autoは最初のカラムから順番に突っ込んでいく

ので、Pinterest風に配置したい場合はautoを指定してやればOKです。
なお、Firefoxはバグがあるのかなんなのか知らないですけどcolumn-countを指定した場合はautoを指定すると一列になってしまい、balanceを指定するとautoの挙動をする（ややこしい）というクソ現象に見舞われました。
わけがわからんので詳しい人いたら教えてください。

後は、画面サイズによってカラム数を変えたい場合に備えて以下みたいな感じでメディアクエリを書いてやります。
これで、小さいモニターとかスマホとかだと空気を読んでサイズを小さくしてくれます。

@media screen and (max-width: 980px) {
    .tweets--wrapper {
        -webkit-column-count: 3;
        -webkit-column-fill: auto;
        -moz-column-count: 3;
        -moz-column-fill: balance; 
        column-count: 3;
        column-fill: auto;
    }
}

@media screen and (max-width: 480px) {
    .tweets--wrapper {
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto;
    }
}

やることはこんだけで、あとは適当に中の要素のCSSをいじったりしていい感じにしてください。
ね、簡単でしょ？

なお、CSSは簡単で30分くらいで出来たんですけども、今回のサンプルアプリを作るにあたって使ったTwitterの認証周りとかがクソ面倒で延々と謎ハマりしまくったことをお伝えしておきます。
あと何気にVue.jsとか使ってます。Vue.js簡単便利でAngularより全然いいじゃねえかっておもいました。

OAuth-io自体は結構便利感あるのにほとんど情報がないので、それもそのうち記事書こうと思います。

ニンジャスレイヤーのアニメ楽しみですね。

以上。