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