Masonry alternative
JavaScript
Latest commit 2f5f418 Jul 27, 2014 @zessx Fix padding issue
Permalink
Failed to load latest commit information.
LICENSE Initial commit Jun 10, 2014
README.md Remove comparison section Jul 27, 2014
cement.js Fix padding issue Jul 27, 2014
cement.min.js Fix padding issue Jul 27, 2014
cementjs.png Update README Jul 27, 2014

README.md

CementJS

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

  1. Download cement.min.js (or its unminified version)
  2. Include jQuery : <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  3. 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

Donations

Buy me a coffee !