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

Dynamic & Auto-resizing Grid Layout Plugin with jQuery - boxfish.js
File Size: 12.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.