jQuery Masonryを使ってみる | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

すでにトップページはグリッド配置ができるjQueryプラグインを利用させていただいていますが、今回別ページで同様にグリッド配置を可能にするjQuery Masonryを設定したのでメモしておこうと思います。英語のチュートリアルは読むのに時間がかかりますね･･･。

やったこと

jQuery Masonryのダウンロードしてjquery.masonry.jsをサーバへアップロード

jquery.masonry.jsを読み込んで設定します。今回は画像を表示させるので、画像を表示しても崩れないように設定しています。各設定はjQuery MasonryページのDemoを参照するとよいと思います。

<script type="text/javascript" src="./js/jquery.masonry.js"></script>
      <script type="text/javascript">
        $(function(){
       
          var $container = $('#grid-entry_content');
        
          $container.imagesLoaded( function(){
            $container.masonry({
              itemSelector : '.grid-wrapper-230'
            });
          });
        
        });
      </script>

CSSはこんなかんじで書きました。id名・class名もそうですが、細かい設定は構築する環境によって異なりますので適宜書き換えてください。

#grid-entry_content {
        width: 730px;
        margin:10px 0 0 0; 
         padding: 0;
        overflow: auto;
      }
      
      .grid-wrapper-230 {
        width: 205px;
        margin: 0 15px 15px 0;
        padding: 5px 8px 5px 8px;
        border: 2px solid #fff;
        background:#fff;
        display: inline;  /* IE6 fix */	
      }

とりあえず意図したとおりに表示できるようになったのでよしとします。