CementJS is a jQuery plugin, which will allow you to quickly present a list of elements under a grid layout. It is a Masonry alternative.
Unlike Masonry, CementJS create a real grid : every row has the same height, and every column has the same width. This doesn't mean your elements can't span over several columns and/or rows.
Installation
- Download
cement.min.js(or its unminified version) - Include jQuery :
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> - Include CementJS :
<script src="cement.min.js"></script>
Basic usage
For a basic usage, you need to wrap your elements in a container :
<section id="container">
<article>...</article>
<article>...</article>
<article>...</article>
</section>
Then, initialize CementJS :
$('#container').cement();
That's all. CementJS will automatically calculate your elements position, trying to take as less space as possible.
Span over columns and rows
If you want an element to span over 2 columns, use this HTML :
<article data-w="2">...</article>
In the same manner, you can span over rows (or combine both) :
<article data-w="2" data-h="3">...</article>
Both data attributes are initialized to 1 if they're not specified
Options
CementJS provides a few options, to be more flexible :
| Option | Default value | Description |
|---|---|---|
columns |
4 |
Number of columns in your grid. |
columnMinWidth |
0 |
Minimum width the columns can have. Under this width, a column is removed. Set to 0 to keep the same number of columns, whatever their width. |
brickSelector |
> * |
Target elements inside the container. |
horizontalGutter |
5 |
Size of horizontal gutters. |
verticalGutter |
5 |
Size of vertical gutters. |
transitionDuration |
.2s |
Transition duration. |
Legals
- Author : zessx
- Licence : MIT
- Contact : @zessx
- Link : http://smarchal.com/cementjs