search

fuxingloh / vue-masonry-wall

A pure vue responsive masonry layout without direct dom manipulation and ssr support.
https://nuxt-app.fuxing.dev/vue-masonry-wall
MIT License
211 stars 31 forks source link

Padding should be considered when calculating columns #37

Open sogehige opened 3 years ago

sogehige commented 3 years ago

In several cases I have 1 extra column when padding is used

I solved it with, but it is just workaround for me

diff --git a/node_modules/vue-masonry-wall/src/vue-masonry-wall.vue b/node_modules/vue-masonry-wall/src/vue-masonry-wall.vue
index 5400ef7..4a97dbd 100644
--- a/node_modules/vue-masonry-wall/src/vue-masonry-wall.vue
+++ b/node_modules/vue-masonry-wall/src/vue-masonry-wall.vue
@@ -185,7 +185,7 @@
        * @private internal component use
        */
       _columnSize() {
-        const length = Math.round(this.$refs.wall.scrollWidth / this._options.width)
+        const length = Math.round(this.$refs.wall.scrollWidth / (this._options.width + this._options.padding.default * 2))
         if (length < 1) return 1
         return length
       },
DerYeger commented 2 years ago

I created a Vue 3 component based on this repository. You can find it at https://github.com/DerYeger/vue-masonry-wall.

It has been rewritten in TypeScript, does not rely on external dependencies, takes padding in regard when calculating the column count, and supports item removal. A demo is available at https://vue-masonry-wall.yeger.eu/.