https://github.com/zessx/cementjs

Masonry alternative
https://github.com/zessx/cementjs

Last synced: about 1 year ago
JSON representation

Masonry alternative

• Host: GitHub
• URL: https://github.com/zessx/cementjs
• Owner: zessx
• License: mit
• Created: 2014-06-10T22:14:21.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2019-10-08T11:25:28.000Z (over 6 years ago)
• Last Synced: 2025-04-05T01:11:14.083Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://work.smarchal.com/cementjs
• Size: 132 KB
• Stars: 20
• Watchers: 2
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
![CementJS](cementjs.png)

=====================

[CementJS](http://smarchal.com/cementjs) is a jQuery plugin, which will allow you to quickly present a list of elements under a grid layout. It is a [Masonry](http://masonry.desandro.com/) 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 : ``

3. Include CementJS : ``

Basic usage

-----------

For a basic usage, you need to wrap your elements in a container :

	

		...

		...

		...

	

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 :

	...

In the same manner, you can span over rows (or combine both) :

	...

> 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](https://github.com/zessx)

- Licence : [MIT](http://opensource.org/licenses/MIT) 

- Contact : [@zessx](https://twitter.com/zessx)

- Link  : [http://smarchal.com/cementjs](http://smarchal.com/cementjs)

Donations

---------

[![Buy me a coffee !](http://doc.smarchal.com/bmac)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=KTYWBM9HJMMSE&lc=FR&item_name=Buy%20a%20coffee%20to%20zessx%20%28Samuel%20Marchal%29&currency_code=EUR&bn=PP%2dDonationsBF%3abmac%3aNonHosted)