##jqueryでタイルレイアウトをしたい 最近、デジタルコンテンツ販売のサイトを運営し始めました。このとき思ったのが、「ある一定領域のなかであれば、どれだけボックス要素（サムネイルと商品名）を増やしても、自動でうまい具合に流し込みたい」ということでした。 なぜなら、通常のリストだけでは敷き詰められたボックス要素が横幅を超えると「横幅いっぱいになったから次にズレそう」といのをしてくれなくて横一列に詰めまくってレイアウトが崩れてしまうからです。 これを回避するには、何個かのボックス要素ごとにリストタグを追加しないといけません。とても面倒ですよね。そこでいくつか探していると、masonry（メーソンリー？マソンリー？）がjqueyでタイルレイアウトをやるのに簡単で設定しやすいということがわかったので、画像とテキストをセットにしてタイルレイアウトさせる方法を紹介します。 ファイルパスの指定方法は
bootstrapとjquery.masonry.jsを使って、レンガ状(pinterest風)にサムネイルを並べていく
最近流行りのbootstrapを使うとすごく簡単にレスポンシブルなサイトを作る事が出来る。 特に自分みたいなエンジニア系のweb制作者にとってはbootstrap使う事によってデザインを整えられるし、 何よりも最大12カラムのグリッドシステムがすごく便利。 だけどグリッドシステムを使ってサムネイルを並べたときなどにそれぞれの高さが変わってしまうと不格好になってしまう。 なのでこれを解決するためにmasonryを使ってグリッドシステムをさらに綺麗に表示することにしてみた。 // html <script src="/js/jquery-1.8.2.min.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="/js/jquery.masonry.min.js"></script> <ul class="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
