├── .gitignore
├── LICENSE
├── README.md
├── build.js
├── demo
├── demo-bundle.js
├── index.html
├── index.js
└── webpack.config.js
├── dist
└── .gitkeep
├── package-lock.json
├── package.json
└── src
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/*.js
3 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Paul Collett
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | A new masonry component powered by CSS to be fast loading and free of jQuery or other dependencies. Build specifically for Vue.js projects.
2 |
3 | 
4 |
5 | ### 😎 Why?
6 |
7 | Existing solutions like Vue wrapped DeSandro Masonry, while popular, don't actually leverage Vue's highly optimized Virtual DOM renderer and in DeSandro Masonry's case, actually renders elements twice before showing the layout. All of this is ok but we found it to lead to a slow, "laggy" user experience that would occasionally miss-render our layout.
8 |
9 | Our need for a simple Masonry layout that was fast, used Vue's Virtual DOM without needing jQuery or other dependencies led us to explore what we could do with the latest techniques using just CSS within a React Component.
10 |
11 | Between flexbox, css columns, css grid we settled on plain ol' div's and a dab of flexbox that allows for "fluid" responsive layouts by default but most importantly is true to Vue's rendering lifecycle.
12 |
13 | *`vue-masonry-css`* Is a Vue Component with a simple interface to order items into the desired columns at specified breakpoints. With minimal CSS this leads to a quick, reliable solution that also has great browser support along with fast rendering performance ..just as Vue.js intended.
14 |
15 | 😄 What does this do
16 | - Responsive! ..always
17 | - IE 10+ CSS Support (and, IE9)
18 | - No Dependencies - Which means no need for jQuery!
19 | - Works with existing CSS animations on your elements, like fading in on first load
20 | - CSS powered (Faster to render)
21 | - Allows for Gaps (Gutters) between elements
22 |
23 | 🏳️ What doesn't this do
24 | - Works with elements with different widths
25 | - Sorting based on height - This kills performance, so if you don't need it we're here for you
26 |
27 | ### 😲 Simple Usage
28 |
29 | Add `vue-masonry-css` to your project:
30 |
31 | By script..
32 |
33 | ```HTML
34 |
35 |
36 | ```
37 |
38 | Or as a module... `npm install vue-masonry-css --save-dev`
39 |
40 | ```JS
41 | import Vue from 'vue'
42 | import VueMasonry from 'vue-masonry-css'
43 |
44 | Vue.use(VueMasonry);
45 | ```
46 |
47 | In your HTML template...
48 | ```HTML
49 |
53 | Item: {{index + 1}}
54 |
55 | ```
56 |
57 | ### Resposive Breakpoints
58 |
59 | Different columns and gutter sizes can be specified by passing an object containing key's of the window widths and their values representing the number of columns or gutter size. To have a fallback value, use the `default` key.
60 |
61 | _note:_ The `cols=` attribute needs to use Vues bind method to evaluate objects. Instead of `cols=""` use either `v-bind:cols="{ 700: 3 }"` or the shorthand `:cols="{ 700: 3 }"`
62 |
63 | ```HTML
64 |
68 | Item: {{index + 1}}
69 |
70 | ```
71 |
72 | In the above example, the number of columns will default to 4. When the window's is between 1000px and 700px, the number of columns will be 3. The key represents the `max-width` of the window, and `vue-masonry-css` will use the largest key that satisfies this.
73 |
74 | ### Example
75 |
76 | https://paulcollett.github.io/vue-masonry-css/demo/
77 |
78 | ### Suggestions & Issues
79 | https://github.com/paulcollett/vue-masonry-css
80 |
81 | **Contact me direct:**
82 | * https://github.com/paulcollett
83 | * http://paulcollett.com
84 |
--------------------------------------------------------------------------------
/build.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | var rollup = require('rollup');
3 | var uglify = require('uglify-js');
4 | var buble = require('rollup-plugin-buble');
5 | var package = require('./package.json');
6 | var banner =
7 | "/*!\n" +
8 | " * vue-masonry-css v" + package.version + "\n" +
9 | " * https://github.com/paulcollett/vue-masonry-css\n" +
10 | " * Released under the MIT License.\n" +
11 | " */\n";
12 |
13 | rollup.rollup({
14 | input: 'src/index.js',
15 | plugins: [buble()]
16 | })
17 | .then(bundle =>
18 | bundle.generate({
19 | format: 'umd',
20 | banner: banner,
21 | name: 'VueMasonry'
22 | }).then(({code}) => write('dist/vue-masonry.js', code, bundle))
23 | )
24 | .then(bundle =>
25 | write('dist/vue-masonry.min.js', banner + '\n' +
26 | uglify.minify(read('dist/vue-masonry.js')).code,
27 | bundle)
28 | )
29 | .then(bundle =>
30 | bundle.generate({
31 | format: 'es',
32 | banner: banner
33 | }).then(({code}) => write('dist/vue-masonry.es2015.js', code, bundle))
34 | )
35 | .then(bundle =>
36 | bundle.generate({
37 | format: 'cjs',
38 | banner: banner
39 | }).then(({code}) => write('dist/vue-masonry.common.js', code, bundle))
40 | )
41 | .catch(logError);
42 |
43 | function read(path) {
44 | return fs.readFileSync(path, 'utf8');
45 | }
46 |
47 | function write(dest, code, bundle) {
48 | return new Promise(function (resolve, reject) {
49 | fs.writeFile(dest, code, function (err) {
50 | if (err) return reject(err);
51 | console.log(blue(dest) + ' ' + getSize(code));
52 | resolve(bundle);
53 | });
54 | });
55 | }
56 |
57 | function getSize(code) {
58 | return (code.length / 1024).toFixed(2) + 'kb';
59 | }
60 |
61 | function logError(e) {
62 | console.log(e);
63 | }
64 |
65 | function blue(str) {
66 | return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m';
67 | }
68 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Vue Masonry Css Example
6 |
7 |
8 |
25 |
26 |
27 |
28 | ← GitHub / Docs
29 | vue-masonry-css example
30 | A Vue masonry component powered by CSS to rendered fast, responsive and to be free of jQuery or other dependencies. Build specifically for Vue projects.
31 |
32 |
33 |
37 |
38 |
Item: {{index + 1}}
39 |
![]()
45 |
46 |
48 |
49 |
Dynamic Masonry Layout showing re-rendering:
50 |
51 |
52 |
Example with static HTML (see source):
53 |
57 | My Element 1
58 | My Element 2
59 | My Element 3
With another line
60 | My Element 4
61 | My Element 5
62 | My Element 6
63 | My Element 7
64 | My Element 8
65 |
66 |
67 |
Example with a mix of static HTML and dynamically rendered (see source):
68 |
Also, a smaller gutter size
69 |
73 | My Element 1
74 | My Element 2
75 | Item: {{index + 1 + 2}}
76 | My Element 6
77 | My Element 7
78 | My Element 8
79 |
80 |
81 |
Placeholder text and images rendered with Vue-Dummy
82 |