ravenz weblog: [web関連] Masonry使ってみた [テスト]

[SCIENCE]だとかいうコーナーを作ってみたはいいものの
ものの2回で終わりかけている
やる気のない当ブログですが、

徐々に進化しております。

ほら、右のほうにカテゴリーのボタンが出来てるでしょう。
(誰にも押されることのない可哀想なボタンたち。)

今回は、jQueryのMasonryという素晴らしいネーミングのプラグインを
テストしたので、是非ご覧ください。

テストページ(イメージ集)へ。

ウインドウの幅を変えると、Printrestというサイトみたいに
アニメーションしながら中身が動いたりするので
ウインドウの幅、色々変えてみて下さい。
(むしろ、変えてもらえないと"何も起こらない"という寂しい結果が)

ちなみに、Printrestを私は使用したことがないんですけどね。

それでは以下よりMasonryの使用方法。

1

まずは、Masonryのサイトでmasonry.pkgd.min.jsをダウンロード。
上記のjsファイルをサーバーにup。

2

そして、

<head>

内に jQuery の本体と、masonry.pkgd.min.js を記述。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="ファイルまでのパス/masonry.pkgd.min.js"></script>

3

同

<head>

内に id container (= #container)に対してMasonryを稼働させる為の
以下の記述を追加。

$(function(){
var $container = $('#container');
      $container.masonry({
          itemSelector : '.item',
          isAnimated : true,
     });
});

＊もちろん[ container ]でなくても [hogehogehoge] とかでもOK。
その場合は上記の[container]になってる部分(3カ所)全て
[hogehogehoge]　や任意のidに変更してくださいね。

4

htmlを以下のようにマークアップする。

<div id="container">
  <div class="item"> 内容物 </div>
  <div class="item w2(任意)"> 内容物 </div>
  <div class="item"> 内容物 </div>
  .......
</div>

*3番目の行程で出て来たscriptコードの

itemSelector : '.item'

がキーなので、
クラス名を変更したい場合はscriptコードの

'.item'

も変更してくださいね。
下のcssも同じくです。

5

cssファイルを以下のように設定。

.item{width: 25%;}
.item.w2{width: 50%;}

＊3番目の行程で出て来たscriptコードの

itemSelector : '.item'

が
キーです。

6

Masonryのサイトに記述されている内容をばっくりお伝えすると
基本的にはこれで終了〜と言いたいのですが、

色々とデザインや、やりたいことに合わせて修正が必要です。
ここからが大変だぞ〜

7

3番目の行程ででてきたscriptコードのままだと、
body内の画像などが読み込まれる前に、先にscriptを実行してしまうので
(なかなかおもしろい表示が出て来て焦りました)

対処法としては、

3番目の行程のscriptコードをbodyの最後に記述する、
もしくは雑ですが以下のコードに変更。(どちらでも大丈夫だと思われる)

 $(window).load(function(){
      var $container = $('#container');
      $container.masonry({
            itemSelector : '.item',
            isAnimated : true,
      });
 });

＊ピンク色でハイライト部分が重要で
ページ内の(画像も含めて)全て読み込んでから実行、という内容を追記しています。
(しかしjQueryもjavascriptもド初心者なので間違っていたらごめんなさい。)
私のサンプルページではこれで対処できました。

元々の$(function(){だと、htmlのタグとかは読み込んでいても
画像とかは対象ではないんですね〜。

$(function(){で実行した結果。恐ろしい。$(window).load(function(){にしてね。

そして
黄色でハイライトしている部分ですが、
これらはoptionで他にも追加したり、変更したりできます。
上記では

 itemSelector : '.item', // で「クラス=itemに対して動作する」
 isAnimated : true // で「アニメーションで動く」

その他

columnWidth: 60 // 「列幅を60pxに」(数値は任意)
gutter: 10 // 「隙間を10pxに」(同じく任意)

などがあります。

Masonryのoptionページでデモ付きで紹介されています。

追加で記述していくときは

(コンマ)を忘れないでくださいね。

itemSelector : '.item',
isAnimated : true,
columnWidth: 60,
gutter: 5,

8

cssの追記。これがoption次第で色々と記述方法が変わってくるのですが
私の場合は(多分無駄に)@mediaでメディアクエリでかなり
ブレイクポイントを作ってしまいました。

以下、その一部をご紹介。
しかし、デザインによって変わってくるのでこれが正解とはとうてい思えない。

div.item{
   width: 90%;
   margin: 10px 5%;
   float: left;
}

@media screen and (min-width: 481px) {
  div.item{
      width: 47%;
      margin: 10px 1.2%;
  } 
}

@media screen and (min-width: 769px) {
  div.item{
      width: 30%;
      margin: 10px 1%; 
  }
}

@media screen and (min-width: 1400px) {
  div.item{
      width: 17%;
      margin: 10px 1%; 
  } 
}

どんだけブレイクポイント作っとるねんっつー話で、
Masonryの良さを一切利用できてない気もします。
あくまで一例だと思って頂ければ幸いです。

jQuery関連で試してみた記事をまとめました。
Tips付きのものだけ列挙してます。
(JavaScriptだけのものも含む)

2014年4月14日月曜日

[web関連] Masonry使ってみた [テスト]

それでは以下よりMasonryの使用方法。

1

2

3

4

5

6

7

8

0 件のコメント:

コメントを投稿