A jQuery Masonry alternative with CSS-driven configuration.
See the code
Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry.
To find out more and see it in action, please visit our website.
You can also follow us on Twitter.
Methods can be called on the globally exposed salvattore object for advanced usage.
var grid = document.querySelector('#grid');
var item = document.createElement('article');
salvattore.appendElements(grid, [item]);
item.outerHTML = 'I’ve been appended!';
| Method | Argument | Description |
|---|---|---|
| appendElements | grid : DOM object, elements: Array of DOM objects | Adds elements to the end of a grid. |
| prependElements | grid : DOM object, elements: Array of DOM objects | Adds elements to a beginning of a grid. Adds multiple elements one by one before each other, so note the order. |
| registerGrid | grid : DOM object | Adds a new grid to salvattore. Which is initialized automatically then. |
| recreateColumns | grid : DOM object | Removes all the columns from the grid, and adds them again. |
| rescanMediaQueries | Checks stylesheets and selectors for media queries again. Recreates the columns for all grids afterwards. |
We use Gulp to add polyfills and minify the script in the dist/ folder. To make changes to the script itself, please edit src/salvattore.js and send us a pull request.
You can even contribute by using Salvattore and sharing bugs, ideas or solutions on the Issues page. Protip: if you're posting a bug please share all the relevant data and ideally a live URL so that we can debug (yeah we do that!)
Overall
Maintained
Code review
npm
Latest release
Releases this year
3,078 followers · starred Sep 2013
302 followers · starred Oct 2013
150 followers · starred Jan 2015
4,044 followers · starred Oct 2015
A jQuery Masonry alternative with CSS-driven configuration.
See the code
Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry.
To find out more and see it in action, please visit our website.
You can also follow us on Twitter.
Methods can be called on the globally exposed salvattore object for advanced usage.
var grid = document.querySelector('#grid');
var item = document.createElement('article');
salvattore.appendElements(grid, [item]);
item.outerHTML = 'I’ve been appended!';
| Method | Argument | Description |
|---|---|---|
| appendElements | grid : DOM object, elements: Array of DOM objects | Adds elements to the end of a grid. |
| prependElements | grid : DOM object, elements: Array of DOM objects | Adds elements to a beginning of a grid. Adds multiple elements one by one before each other, so note the order. |
| registerGrid | grid : DOM object | Adds a new grid to salvattore. Which is initialized automatically then. |
| recreateColumns | grid : DOM object | Removes all the columns from the grid, and adds them again. |
| rescanMediaQueries | Checks stylesheets and selectors for media queries again. Recreates the columns for all grids afterwards. |
We use Gulp to add polyfills and minify the script in the dist/ folder. To make changes to the script itself, please edit src/salvattore.js and send us a pull request.
You can even contribute by using Salvattore and sharing bugs, ideas or solutions on the Issues page. Protip: if you're posting a bug please share all the relevant data and ideally a live URL so that we can debug (yeah we do that!)
Overall
Maintained
Code review
npm
Latest release
Releases this year
3,078 followers · starred Sep 2013
302 followers · starred Oct 2013
150 followers · starred Jan 2015
4,044 followers · starred Oct 2015