jMosaic example

HTML

<link rel="stylesheet" href="https://rawgit.com/absentik/jMosaic/master/css/jquery.jMosaic.css">
<script src="https://rawgit.com/absentik/jMosaic/master/js/jquery.jMosaic.js"></script>
<ul class="pictures">
	<li><a href="#"><img src="https://raw.githubusercontent.com/absentik/jMosaic/master/img/pics-001.jpg" width="700" height="446"/></a></li>
  <li><a href="#"><img src="https://raw.githubusercontent.com/absentik/jMosaic/master/img/pics-002.jpg" width="700" height="448"/></a></li>
  <li><a href="#"><img src="https://raw.githubusercontent.com/absentik/jMosaic/master/img/pics-003.jpg" width="640" height="896"/></a></li>
  <li><a href="#"><img src="https://raw.githubusercontent.com/absentik/jMosaic/master/img/pics-004.jpg" width="700" height="551"/></a></li>
    <li><a href="#"><img src="https://raw.githubusercontent.com/absentik/jMosaic/master/img/pics-005.jpg" width="700" height="438"/></a></li>
</ul>

CSS

.pictures {
    width: 700px;
}

.pictures img {
    width: 100%;
    height: 100%;
}

JavaScript

$(document).ready(function() {
    $('.pictures').jMosaic({
      items_type: "li"
    });
});