menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/01/31
  • JQuery

ウィンドウサイズに応じて配置したコンテンツのレイアウトを整列してくれる「 Masonry」

ウィンドウサイズに合わせてfloatで配置したコンテンツの幅や高さを、隙間無くレイアウトしてくれる「Masonry」
masonry

使用方法

ダウンロード

Masonry.js

準備するファイル

・jquery.js


・masonry.pkgd.min.js

外部ファイルの読み込み

JavaScript

HTML

今回は「id=”container”」という親要素のボックス内に配置した「class=”box”」という要素を整列させる

Stylesheet

CSSで「box」に大きさを指定

Option

itemSelector

整列要素のclassを指定

columnWidth

一列の幅サイズを指定

isAnimated

アニメーション設定

isFitWidth

親要素の幅サイズをピッタリに

isRTL

整列要素が左右逆になる

gutterWidth

整理される要素間の溝の幅を指定

containerStyle

親要素にスタイルを追加できる

isResizable

ウィンドウサイズが変更された時に並び替え

オプションもいくつか用意されており、比較的簡単に設定できるのでオススメです。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11