Posted on

jQuery – Masonry

jQuery Masonry plugin

Download from:
http://masonry.desandro.com/#install

Example html file:

<script src="/path/to/masonry.pkgd.min.js"></script>
<style type="text/css">
.item {
    width: 25%;
    border: solid 2px #F00;
    margin-bottom: 10px;
    padding: 10px;
}
.item.w2 {
    width: 50%;
    border: solid 2px #00F;
}
</style>
<div id="container">
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet sodales felis, tempus fringilla orci. Suspendisse tellus arcu, porttitor ut dignissim sit amet, semper sit amet odio. Curabitur sed arcu ac quam fringilla pellentesque sed tincidunt eros. Proin tellus arcu, fringilla at libero quis, commodo vulputate tellus. Curabitur varius lacinia facilisis. Aenean imperdiet a lorem eu condimentum. Pellentesque condimentum, diam non placerat pharetra, arcu diam convallis urna, id efficitur augue neque id eros. Sed volutpat laoreet condimentum. In sit amet sem id nisi ornare laoreet. Suspendisse vitae luctus ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </div>
  <div class="item w2">Phasellus convallis purus non velit ultricies, nec tincidunt sem mollis. Phasellus vestibulum, dui in tristique porttitor, lectus eros varius ante, a rutrum velit risus ut elit. Praesent fermentum viverra quam, eget condimentum enim efficitur quis. Integer ultrices dapibus purus. Nulla tincidunt tortor at justo dictum, in euismod sapien convallis. Aenean venenatis sollicitudin bibendum. Duis eget tellus ut metus vestibulum congue. Fusce libero purus, molestie ac dolor sed, gravida faucibus mi. Curabitur varius posuere posuere. Duis at urna rhoncus, placerat odio in, malesuada odio. Nulla sed nisl pulvinar, mattis sem sit amet, mattis justo. Nulla facilisi. Mauris id tempor eros. Mauris ut semper sem, et iaculis nulla. </div>
  <div class="item">Nam pellentesque eu augue a fermentum. Fusce consectetur pulvinar ultrices. Aliquam sagittis congue leo, quis feugiat lectus. Nunc sodales metus erat, quis sagittis sapien fermentum sed. Suspendisse faucibus purus lectus. Quisque bibendum consequat dictum. Aenean dictum sapien a leo mattis, vitae posuere sapien hendrerit. Mauris auctor iaculis risus, sit amet aliquet diam feugiat eleifend. Nam sem quam, fermentum at sollicitudin tempor, mattis ut nulla. Proin vestibulum eros eget enim facilisis finibus. In hac habitasse platea dictumst. In sit amet nisl magna. Vestibulum lorem neque, viverra a mollis ornare, aliquam lobortis augue. Vivamus luctus magna id felis maximus, aliquam auctor ligula commodo.</div>
  <div class="item">Sed ac consectetur sapien, in tristique elit. Maecenas ornare ex pulvinar, aliquet justo ut, viverra ipsum. Mauris gravida eleifend nisl, eu varius enim pellentesque ac. Phasellus lectus nisl, luctus nec faucibus eget, congue a sapien. Quisque tincidunt euismod mi vel scelerisque. Donec eget condimentum elit. Aenean viverra, enim eget sagittis elementum, magna nisl suscipit nisl, euismod vestibulum odio purus sed orci. </div>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
    // CREATE THE MANSORY OBJECT WHEN DOM + ALL IMAGES ARE LOADED
    // DON'T USE jQuery(document).ready()!
    var container = document.querySelector('#container');
    var msnry = new Masonry( container, {
      columnWidth: 290,
      gutter: 5,
      itemSelector: '.item',
      isFitWidth: true
    });    
});
</script>

Resources:
http://masonry.desandro.com/