Dynamic & Auto-resizing Grid Layout Plugin with jQuery - boxfish.js

Boxfish.js is a tiny jQuery responsive grid layout plugin that dynamically resizes columnar boxes and changes the number of columns per row when the container reaches a specific breakpoint.

How to use it:

1. Insert a set of columnar boxes in your document.

<div class="container">
  <div class="box">Box #1</div>
  <div class="box">Box #2</div>
  <div class="box">Box #3</div>
  <div class="box">Box #4</div>
  <div class="box">Box #5</div>
  <div class="box">Box #6</div>
  ...
</div>

2. Include jQuery javascript library and the jQuery Boxfish.js at the end of your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/boxfish.js"></script>

3. Initialize the plugin and setup how many columns to display when the container is greater than or equal to the pixel breakpoint and less than any larger breakpoints.

$('.box').boxfish({
columns: 3,
breakpoints: [
  [1280, 5],
  [1024, 4],
  [768, 3],
  [480, 2],
  [300, 1]
]
});

4. Style the columnar boxes in the CSS as you wish.

.boxfish-container {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  overflow: hidden;
 text-align:
}

.boxfish-box {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  display: block;
  background-color: #2ecc71;
  border: 1px solid #27ae60;
  margin: 0px;
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 3px;
  padding: 20px;
  -webkit-transition: width 0.5s ease-out;
  transition: width 0.5s ease-out;
}

Change log:

v0.2 (2014-08-20)

• Refactored plugin to be more performant.
• Added support for dynamic height adjustment so that all boxes in a row resize to be equal to the height of the tallest box.
• Added image loading detection to resize boxes after an image loads, which affects the overall height.

---

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