https://github.com/paulcollett/vue-masonry-css
Vue.js Masonry layout component powered by CSS, dependancy free
https://github.com/paulcollett/vue-masonry-css
Last synced: 9 months ago
JSON representation
Vue.js Masonry layout component powered by CSS, dependancy free
- Host: GitHub
- URL: https://github.com/paulcollett/vue-masonry-css
- Owner: paulcollett
- License: mit
- Created: 2017-10-09T19:43:54.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:15:22.000Z (almost 3 years ago)
- Last Synced: 2024-04-24T17:06:12.349Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://paulcollett.github.io/vue-masonry-css/demo/
- Size: 857 KB
- Stars: 466
- Watchers: 11
- Forks: 42
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- stars - paulcollett/vue-masonry-css
- awesome-vue - vue-masonry-css - Vue.js Masonry layout component powered by CSS, dependancy free ` 📝 3 years ago ` (UI Layout [🔝](#readme))
- awesome-vue-zh - Vue - 砖混CSS - 由CSS提供支持的Vue.js Masonry布局组件,无需依赖 (UI布局 / 游览)
- awesome-vue - vue-masonry-css - Vue.js Masonry layout component powered by CSS, dependency free. (Components & Libraries / UI Layout)
- awesome-vue - vue-masonry-css ★183 - Vue.js Masonry layout component powered by CSS, dependency free (UI Layout / Tour)
- awesome-vue - vue-masonry-css - Vue.js Masonry layout component powered by CSS, dependency free (UI Layout / Tour)
README
A new masonry component powered by CSS to be fast loading and free of jQuery or other dependencies. Build specifically for Vue.js projects.
### 😎 Why?
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.
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.
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.
*`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.
😄 What does this do
- Responsive! ..always
- IE 10+ CSS Support (and, IE9)
- No Dependencies - Which means no need for jQuery!
- Works with existing CSS animations on your elements, like fading in on first load
- CSS powered (Faster to render)
- Allows for Gaps (Gutters) between elements
🏳️ What doesn't this do
- Works with elements with different widths
- Sorting based on height - This kills performance, so if you don't need it we're here for you
### 😲 Simple Usage
Add `vue-masonry-css` to your project:
By script..
```HTML
```
Or as a module... `npm install vue-masonry-css --save-dev`
```JS
import Vue from 'vue'
import VueMasonry from 'vue-masonry-css'
Vue.use(VueMasonry);
```
In your HTML template...
```HTML
Item: {{index + 1}}
```
### Resposive Breakpoints
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.
_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 }"`
```HTML
Item: {{index + 1}}
```
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.
### Example
https://paulcollett.github.io/vue-masonry-css/demo/
### Suggestions & Issues
https://github.com/paulcollett/vue-masonry-css
**Contact me direct:**
* https://github.com/paulcollett
* http://paulcollett.com