Pinterest Like Masonry Grid For jQuery - columnsToJs

columnsToJs is a lightweight jQuery plugin used to create responsive, Masonry-like cascading grid layout for block elements. Inspired by Pinterest.com.

How to use it:

1. Add your block elements to the webpage as these:

<div class="example">
  <div>
    <img src="1.jpg" alt="">
  </div>
  <div>
    <img src="2.jpg" alt="">
  </div>
  <div>
    <img src="3.jpg" alt="">
  </div>
  <div>
    <img src="4.jpg" alt="">
  </div>
  <div>
    <img src="5.jpg" alt="">
  </div>
  ...
</div>

2. Include jQuery library and the jQuery columnsToJs plugin at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="js/columnstojs.js"></script>

3. Initialize the Masonry Grid with default settings.

$('.example').columnsToJs();

4. Set the space between grid items.

$('.example').columnsToJs({
  gap: 0 // default 20
});

5. All default configuration options.

$('.example').columnsToJs({

  // the number of divs
  count: 3,

  // arrange as optimally as possible
  fixed: true

  // stacking accuracy
  check: 10,

  // refresh interval
  interval: false,

  // debug mode
  debug: false
  
});

---

This awesome jQuery plugin is developed by KosakKozak. For more Advanced Usages, please check the demo page or visit the official website.