Create Neat Justified Grid Layout With jQuery - sameify

File Size: 5.48 KB
Views Total: 615
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Create Neat Justified Grid Layout With jQuery - sameify

sameify is a small and configurable jQuery equal height plugin to create neat, justified layout by equalizing the height of each row of grid elements. Compatible with Bootstrap grid layout system.

How to use it:

1. Download and insert the jQuery sameify plugin's script after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="jquery.sameify.js"></script>

2. Call the main function sameify on the grid items which should have the same height.

<div class="container">
  <div class="col-sm-3 box">
    rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut 
  </div>
  <div class="col-sm-3 box">
    odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam 
  </div>
  <div class="col-sm-3 box">
    and expound the actual teachings of the great explorer of the truth, the master-builder of 
  </div>
  <div class="col-sm-3 box">
    ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
  </div>
</div>
$(function(){
  $('.box').sameify();
})

3. Specify the debounce time in milliseconds that the plugin will wait until the window is being resized.

$(function(){
  $('.box').sameify({
    refresh: 200
  });
})

4. Specify the max/min screen width the plugin should work.

$(function(){
  $('.box').sameify({
    min: 0,
    max: 6000
  });
})

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