MasonTile.js

★Browser★

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

★Download★

Package Download here >> Download

★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:diamond */
        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;
}