menu

Creative Demos

What is Masonry?

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

http://masonry.desandro.com/

Masonry

  • 2種類のサイズの違う要素をmasonryで表現
  • fancyboxを使っていますがまた別の機会に

html

  • ここではすべて画像で表示していますがサンプルのようにテキストを入れることも可能
  • サイズはcssで。※tall、wideは要素のサイズを指定するために記述
                <div id="mas-content">
                  <div class="mas-item tall"><img src="img/01.jpg" alt=""></div>
                  <div class="mas-item tall"><img src="img/05.jpg" alt=""></div>
                  <div class="mas-item tall"><img src="img/03.jpg" alt=""></div>
                  <div class="mas-item wide"><img src="img/02.jpg" alt=""></div>
                  <div class="mas-item tall"><img src="img/01.jpg" alt=""></div>
                  <div class="mas-item tall"><img src="img/04.jpg" alt=""></div>
                  <div class="mas-item tall"><img src="img/03.jpg" alt=""></div>
                  <div class="mas-item tall"><img src="img/01.jpg" alt=""></div>
                  <div class="mas-item tall"><img src="img/01.jpg" alt=""></div>
                  <div class="mas-item wide"><img src="img/02.jpg" alt=""></div>
                  <div class="mas-item tall"><img src="img/01.jpg" alt=""></div>
                  <div class="mas-item wide"><img src="img/06.jpg" alt=""></div>
                  <div class="mas-item tall"><img src="img/01.jpg" alt=""></div>
                  <div class="mas-item tall"><img src="img/03.jpg" alt=""></div>
                  <div class="mas-item tall"><img src="img/01.jpg" alt=""></div>
               </div>
              

CSS

  • #mas-content:ブラウザ左右センター合わせ
  • #.mas-item:それぞれの間隔。※いらないかも。
  • .tallと.wide:それぞれの要素のサイズを指定。※指定しないとリロードしたりするとレイアウトが崩れます
                #mas-content {
                  margin: 0 auto 30px;
                }

                .mas-item {
                  margin: 5px;
                }

                .tall {
                  width: 220px;
                  height: 300px;
                }

                .wide {
                  width: 450px;
                  height: 200px;
                }
              

javascript

  • 画像データを読み込み後にレイアウトを組んでほしいのでimagesLoaded.jsを使用
  • アニメーションを指定していますがお好みで。ブラウザサイズを変えるとアニメ―ションで並び替え
                $(function() {
                  var $container = $('#mas-content');

                  $container.imagesLoaded(function() {
                    $container.masonry({
                      itemSelector: '.mas-item',
                      isFitWidth: true,
                      isRTL: true,
                      reload: true,
                      isAnimated: true,
                      animationOptions: {
                        duration: 2000,
                        easing: 'swing'
                      }
                    });
                  });
                });
              

Masonry

詳しいオプションなどは本家サイトを参照してください。

http://masonry.desandro.com/