This jQuery plugin is the lightest responsive cascading grid layout library
Try it on JSFiddle
##Installation
###npm
npm install swite-brickify.js
##Usage
Include jquery extension swite-brickify.js
<script src="swite-brickify.js"></script>
###Basic Initialization
$(function(){
$('.container').brickify();
})###Full Initialization
$(function(){
$('.container').brickify({
cssTransition: true,
rebuildOnResize: true,
preserveOrder: true,
gridSystem: {
'LG': {
width: 1200,
columns: 4
},
'MD': {
width: 800,
columns: 3
},
'SM': {
width: 500,
columns: 2
}
}
});
})###Options
| Option | Description |
|---|---|
| cssTransition | Enable/Disable CSS transition |
| rebuildOnResize | Enable/Disable auto redraw on window resize |
| preserveOrder | Enable/Disable elements order preservation |
| gridSystem | Set custom grid system configuration |
#####cssTransition
type:
bool
default:
false
#####rebuildOnResize
type:
bool
default:
false
#####preserveOrder
type:
bool
default:
false
#####gridSystem
type:
object
default:
{
'LG': {
width: 1100,
columns: 4
},
'MD': {
width: 768,
columns: 3
},
'SM': {
width: 480,
columns: 2
}
}###Reload/Rebuild
$('container').brickify('reload');###Destroy
$('container').brickify('destroy');Try it on JSFiddle
Follow Us swite.com