JQuery Masonry-動的レイアウト、「穴」のないタイプセット

Masonry （開発者David DeSandro ）は、スペースをほとんど失うことなく、さまざまなサイズのブロックの動的レイアウトをすばやく簡単に整理できるjQueryプラグインです。ブロックに適切なサイズを選択すると、空のスペースはまったくなくなります。



動的レイアウトとは、ブロックがそのサイズに応じてコンテナ内に配置され、スペースを可能な限り合理的に埋めることにより、ページ上のスペースを節約することを意味します。

仕組み（最低限必要）

まず、 jQueryとプラグイン自体を有効にする必要があります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> <script type="text/javascript" src="jquery.masonry.min.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、プラグインが機能する単純なブロック構造を作成します。

 <div id="container"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> ... </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、ブロックのフロートを作成します。これがないと、プラグインは機能しません

 .item { float: left; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ページのどこかに次のコードを挿入することにより、魔法を開始します。

 <script type="text/javascript"> $(document).ready(function(){ $('#container').masonry({ //  -        itemSelector: '.item', //         singleMode: false, // true -        isResizable: true, //       isAnimated: true, //    animationOptions: { queue: false, duration: 500 } //   -     }); }); </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

できた！ 今、ウィンドウのサイズを変更してみてください、あなたはあなた自身の目ですべてを見るでしょう。

アニメーション

jQueryアニメーションの代わりにcssトランジションを使用する場合は、css3をサポートしていないブラウザー（たとえば、Internet Explorerバージョン8以前）でcssトランジションが機能する別のjQueryプラグインModernizr -transitionsを使用することをお勧めします。



modernizr-transitionsを接続します：

 <script type="text/javascript" src="modernizr-transitions.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Masonryオプションで、isAnimatedを変更し、animationOptionsを削除します：{...}：

 isAnimated: !Modernizr.csstransitions
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、ブロックのcss遷移を規定します、例えば：

 .item { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在、ユーザーのブラウザーがCSS遷移をサポートしていない場合でも、アニメーションは機能します。



デモはここで表示するか、 ダウンロードできます 。



プラグインの設定とドキュメントの完全なリストは、 公式ウェブサイトで見つけることができます。