A simple plugin to create Masonry / Pinterest style layout. A demo is inside 'demo' directory, or you can check it here on CodePen.
How to use
You can use Bricky by directly injecting script into your document markup or via npm if you use any module bundler like the popular Browserify or powerful Webpack. It takes an object with some settings as the only parameter. Take a look at the example provided below.
parent: '.bricky'elements: 'article'gutter: '12px'breakpoints:600 2900 31200 4
parent(required) - string, jQuery style query where grid should be placed
elements(required) - string, query with elements that should be added to Bricky layout
gutter(optional) - string, gutter width in relative or absolute units
breakpoints(optional) - array, this array is a collection of nested arrays. Each of them is constructed as
[breakpoint, columns]. You can pass as many breakpoints as you want.
In command line...
npm i -S bricky
In script file...
var Bricky = ;var pref =parent: '.bricky'elements: 'article'gutter: '12px'breakpoints:600 2900 31200 4;var test = pref;teststart;
Browser oldschool style
In document markup...
Bricky is using Flexible Box Layout Module. Accordingly to Can I use stats it has 94.04% of global support. Script is written in old-school ES5 way. Wherever the Flexbox is supported, Bricky will work fine.
- IE >= 10
- Edge >= 12
- Firefox >= 2
- Chrome >= 4
- Safari >= 3.1
- Opera >= 12.1
- iOS Safari >= 3.2
- Opera Mini >= 8
- Android Browser >= 2.1
- Blackberry Browser >= 7
- Opera Mobile >= 12.1
- Chrome for Android >= 50
- Firefox for Android >= 46
- IE Mobile >= 10
- UC Browser for Android >= 9.9