jQuery プラグイン Masonry の使い方と設定

コーディングのお仕事

要素をタイル状に隙間なく並べてくれるプラスグインMasonry
便利ですね

Masonryのページに行き「Download masonry.pkgd.min.js」

まずはここからダウンロードします

  1. <script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
  2. <script src=“js/masonry.pkgd.min.js”></script>
  3. <script>
  4. jQuery(function($){
  5. $(‘#container’).masonry({
  6. itemSelector: ‘.item’,
  7. columnWidth: 180,
  8. isFitWidth: true //親要素の幅に合わせてカラム数を自動調整
  9. });
  10. });
  11. </script>

関連記事

特集記事

TOP