MasonTile.js

★Browser★

Latest Chrome Safari Firefox.
not work on IE and Edge.

★License★

MIT License

★How to Use★

■HTML Sample code

●CSS include

<link rel="stylesheet" type="text/css" href="masontile.css">
<link rel="stylesheet" type="text/css" href="custom.css">


●jQuery and js library include

<script src="jquery.min.js"></script>
<script src='masontile.min.js'></script>


●HTML Elements tag (wrapper,box,items)

<div class="wrapper">
    <div id="shape_box">
      <div class="item"><div class="item_img" style="background-color:coral;"></div><a href="/"><p>item1</p></a></div>
      <div class="item"><div class="item_img" style="background-color:olive;"></div><a href="/"><p>item2</p></a></div>
      <div class="item"><div class="item_img" style="background-color:blueviolet;"></div><a href="/"><p>item3</p></a></div>
      <div class="item"><div class="item_img" style="background-color:gold;"></div><a href="/"><p>item4</p></a></div>
      <div class="item"><div class="item_img" style="background-color:burlywood;"></div><a href="/"><p>item5</p></a></div>
      <div class="item"><div class="item_img" style="background-color:brown;"></div><a href="/"><p>item6</p></a></div>
      ........
  </div>
</div>


●script

<script>
  window.addEventListener('DOMContentLoaded', function() {
    jQuery(function($) {

      /* MasonTile */
      $.fn.MasonTile({
        shape: 'diamond',	/* diamond,oct,oct2,oct3,hexi,hexi2,hexi3,rhombus,circle default:hexi3 */
        gap: 100,		/* 1～100 default:100 */
        layout: 'contain',	/* contain,cover*/
        evenrowstep:true,	/* true,false */
        wrapper:'.wrapper',	/* wrapper elem */
        box:'#shape_box',	/* box elem */
        item:'.item'		/* item elem */
      });


    }(jQuery));
  });
</script>
		

■CUSTOM CSS Sample code(custom.css)

#shape_box .item{
    width:240px;
    height:240px;
}