jQuery Masonry - レイアウトjQueryプラグイン

■言語：JavaScript（jQuery.js）
■ライセンス：GPL または MIT

使用例

{code lang="html"}
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.masonry.js"></script>
  <link rel="stylesheet" href="masonry_resource.css" type="text/css" media="screen" />

  <div id="wrapper" class="wrap">
    <div class="box msnry_col1">
      <h5>1</h5>
      <p>段落１・・・ </p>
    </div>

    <div class="box msnry_col2">
      <h5>2</h5>
      <p>段落2・・・</p>
    </div>
    ...
  </div>

<script type="text/javascript">
    $(function(){
        $('#wrapper').masonry({columnWidth: 100});
    //    $('#wrapper').masonry({singleMode: true});
    })
</script>
{code}
ダウンロード：demo.html

表示例

Masonry GitHub プロジェクト

Sponsored Link