[Javascript] サイズ可変のタイリング表示ライブラリ「way-grid」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

先日、cssのcolumn設定での縦サイズ可変のタイリング表示をブログに書きましたが、画像を使ったグリッド表示方式としては、非常に見苦しいモノだったため、pinterest風のライブラリを自分用に作っておくことにしました。
 

– 先日のブログリンク
[css] 画像一覧表示するWEBページで、横サイズ固定、縦サイズ可変の表示最適化について
 

ネットで検索すると、pinterest風のgridシステムライブラリはたくさん存在するようですが、僕の見かけたほとんどがjQueryベースによるもので、なんだかコントロールしずらい印象があったので、今回もいつものように手作りでライブラリ化することにした。
 

もちろん、コンセプトは、以下の3点を追求して行くようにしましょう。
1. ソースがシンプル
2. 設置が簡単
3. 挙動が軽い
 

ソースコード

 

 

jsファイルとcssファイルを同じ階層に設置してお使いください。

設置サンプル

 

 

前回記事に設置をしてみました。
 

“new $$way_grid({*options*});”optionsは何も書かなくてもデフォルトで動作しますが、以下の設定を入れてサイト専用の起動にした方がいいでしょう。
 

 

カラム数とカラム値のどちらかは”auto”にして使ったほうがレスポンシブ対応もできて便利でしょう。
 

デフォルトは、サイズ固定なので、自動的にレスポンシブ対応になります。
 

デモ

See the Pen
way-grid
by YugetaKoji (@geta1972)
on CodePen.


 

Github

https://github.com/yugeta/way-grid
 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です