feat: 优化gutterWidth的适用性

AwesomeDevin · Nov 11, 2022 · bbb38ad · bbb38ad
1 parent 9019f20
commit bbb38ad
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 85 deletions.
diff --git a/CHINESE-README.md b/CHINESE-README.md
@@ -67,7 +67,7 @@ this.$waterfall.forceUpdate()   //forceUpdate
 
 ## Usage
 注意:
- 1.  `gutterWidth`需要与`width`一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值)</font>
+ 1.  使用`rem`布局时，需先计算出自适应后的宽度再传值
  2.  使用了`waterfall`的父组件,如果样式存在问题，可去掉css `scoped`尝试一下
 ##### main.js
 ```javascript
@@ -105,7 +105,7 @@ Vue.use(waterfall)
 
 /*
   注意:
-  1. gutterWidth需要与width一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值)
+  1. 使用`rem`布局时，需先计算出自适应后的宽度再传值
   2. 使用了`waterfall`的父组件,如果样式存在问题，可去掉css `scoped`尝试一下
 */
 

diff --git a/ENGLISH-README.md b/ENGLISH-README.md
@@ -1,20 +1,27 @@
 
 
+
+#### [中文版文档](https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md)
 # vue-waterfall2 
  1. auto adaption for width and height
  2. High degree of customization
- 3. support lazy load(attribute with `lazy-src`)
+ 3. Swipe to the bottom to trigger on pc/android, pull up to trigger on ios
+ 4. Support lazy load(attribute with `lazy-src`)
+ 5. Easy to use, for PC/ios/android
 
 ![The demo on mobile device](https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/master/src/assets/gifhome_240x514_17s.gif)
 
-## [中文版文档](https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md)
 
 If you have some questions,welcome to describe issues、suggestions;Thank you for your Star !   
 [Welcome to my blog  ！！！](https://github.com/AwesomeDevin/blog)
 
 
 ## Demo
-[Demo](http://47.105.188.15:3001/index.html)  
+[Common Demo](http://47.105.188.15:3001/)  
+[Lazyload Demo](http://47.105.188.15:3001/#/list)  
+[Code Demo](https://codesandbox.io/embed/vue-template-99ps6)
+
+
 
 
 
@@ -29,16 +36,50 @@ npm run dev
  npm i vue-waterfall2@latest --save
 ```
 
+## <waterfall> Props
+Name | Default | Type | Desc
+-------- | -------- | -------- | --------
+height | null | Number | height of container
+col | 2  | Number |  The number of column
+width | null | Number | The width of each column
+gutterWidth | 10 | Number | The value of margin
+data | [] | Array | data
+isTransition | true | Boolean | load image with transition
+lazyDistance | 300 | Number | The distance of image lazy loading
+loadDistance | 300 | Number | The distance of loadmore
+
+## Lazy Load
+For images that need to be loaded lazily, the 'lazy-src' attribute needs to be used
+```html
+<waterfall :col='col'   :data="data"     >
+  <template>
+     <img v-if="item.img" :lazy-src="item.img" alt="load error"  />
+  </template>
+</waterfall>
+```
+
+## <waterfall> Events
+Name | Data |   Desc
+-------- | --- | -------- 
+loadmore | - | Scroll to the bottom to trigger on PC /  pull up to trigger on Mobile  
+scroll | obj | Scroll to trigger and get the infomation of scroll
+finish | - | finish render
+
+## $waterfall API
+```
+this.$waterfall.forceUpdate()   //forceUpdate
+```
+
 ## Usage
 Notes:
-  1. attribute `gutterWidth` needs to be used together with `width` to be effective, otherwise it will be adaptive width (when using `rem` to layout, calculate the width after adaptation before passing the value).
+  1. when using `rem` to layout, calculate the width after adaptation before passing the value.
   2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS `scoped` and try it
 ##### main.js
 ```javascript
 import waterfall from 'vue-waterfall2'
 Vue.use(waterfall)
 ```
-##### app.vue(Scoped is not used for this component style)
+##### app.vue
 ```javascript
 <template>
   <div class="container-water-fall">
@@ -68,7 +109,7 @@ Vue.use(waterfall)
 
 /*
   notes:
-  1. attribute `gutterWidth` needs to be used together with `width` to be effective, otherwise it will be adaptive width (when using `rem` to layout, calculate the width after adaptation before passing the value).
+  1. when using `rem` to layout, calculate the width after adaptation before passing the value.
   2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS 'scoped' and try it
 */
 
@@ -102,34 +143,3 @@ import Vue from 'vue'
 	    }
 	}
 ```
-## <waterfall> Props
-Name | Default | Type | Desc
--------- | -------- | -------- | --------
-col | 2  | Number |  the number of column
-width | null | Number | the value of width 
-gutterWidth | 10 | Number | the value of margin
-data | [] | Array | data
-isTransition | true | Boolean | load image with transition
-lazyDistance | 300 | Number | the distance of image lazy loading
-loadDistance | 300 | Number | the distance of loadmore
-
-## Lazy Load
-For images that need to be loaded lazily, the 'lazy-src' attribute needs to be used
-```html
-<waterfall :col='col'   :data="data"     >
-  <template>
-     <img v-if="item.img" :lazy-src="item.img" alt="加载错误"  />
-  </template>
-</waterfall>
-```
-
-## <waterfall> Events
-Name | Data |   Desc
--------- | --- | -------- 
-loadmore | null | Scroll to the bottom to trigger on PC /  pull up to trigger on Mobile  
-scroll | obj | Scroll to trigger and get the infomation of scroll
-
-## $waterfall API
-```
-this.$waterfall.forceUpdate()   //forceUpdate
-```
diff --git a/README.md b/README.md
@@ -3,10 +3,11 @@
 
 #### [中文版文档](https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md)
 # vue-waterfall2 
- 1. Auto adaption for width and height
+ 1. auto adaption for width and height
  2. High degree of customization
- 3. Support lazy load(attribute with `lazy-src`)
- 4. Apply to PC/mobile
+ 3. Swipe to the bottom to trigger on pc/android, pull up to trigger on ios
+ 4. Support lazy load(attribute with `lazy-src`)
+ 5. Easy to use, for PC/ios/android
 
 ![The demo on mobile device](https://raw.githubusercontent.com/AwesomeDevin/vue-waterfall2/master/src/assets/gifhome_240x514_17s.gif)
 
@@ -16,8 +17,8 @@ If you have some questions,welcome to describe issues、suggestions;Thank you fo
 
 
 ## Demo
-[Common Demo](http://175.24.232.69:8080/vue-waterfall/index.html#/)  
-[Lazyload Demo](http://175.24.232.69:8080/vue-waterfall/index.html#/lazy)  
+[Common Demo](http://47.105.188.15:3001/)  
+[Lazyload Demo](http://47.105.188.15:3001/#/list)  
 [Code Demo](https://codesandbox.io/embed/vue-template-99ps6)
 
 
@@ -36,16 +37,16 @@ npm run dev
 ```
 
 ## <waterfall> Props
-Name | Default | Type | Desc | Necessary
--------- | -------- | -------- | -------- | ------
-height | - | String | Container height (null for window scrolling event, not null for container scrolling) | false
-col | 2  | Number |  the number of column | false
-width | - | Number | the value of width | false
-gutterWidth | 10 | Number | the value of margin | false
-data | [] | Array | data | true
-isTransition | true | Boolean | load image with transition | false
-lazyDistance | 300 | Number | the distance of image lazy loading | false
-loadDistance | 300 | Number | the distance of loadmore | false
+Name | Default | Type | Desc
+-------- | -------- | -------- | --------
+height | null | Number | height of container
+col | 2  | Number |  The number of column
+width | null | Number | The width of each column
+gutterWidth | 10 | Number | The value of margin
+data | [] | Array | data
+isTransition | true | Boolean | load image with transition
+lazyDistance | 300 | Number | The distance of image lazy loading
+loadDistance | 300 | Number | The distance of loadmore
 
 ## Lazy Load
 For images that need to be loaded lazily, the 'lazy-src' attribute needs to be used
@@ -61,7 +62,7 @@ For images that need to be loaded lazily, the 'lazy-src' attribute needs to be u
 Name | Data |   Desc
 -------- | --- | -------- 
 loadmore | - | Scroll to the bottom to trigger on PC /  pull up to trigger on Mobile  
-scroll | info | Scroll to trigger and get the infomation of scroll
+scroll | obj | Scroll to trigger and get the infomation of scroll
 finish | - | finish render
 
 ## $waterfall API
@@ -71,7 +72,7 @@ this.$waterfall.forceUpdate()   //forceUpdate
 
 ## Usage
 Notes:
-  1. attribute `gutterWidth` needs to be used together with `width` to be effective, otherwise it will be adaptive width (when using `rem` to layout, calculate the width after adaptation before passing the value).
+  1. when using `rem` to layout, calculate the width after adaptation before passing the value.
   2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS `scoped` and try it
 ##### main.js
 ```javascript
@@ -108,7 +109,7 @@ Vue.use(waterfall)
 
 /*
   notes:
-  1. attribute `gutterWidth` needs to be used together with `width` to be effective, otherwise it will be adaptive width (when using `rem` to layout, calculate the width after adaptation before passing the value).
+  1. when using `rem` to layout, calculate the width after adaptation before passing the value.
   2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS 'scoped' and try it
 */
 

diff --git a/lib/waterfall.vue b/lib/waterfall.vue
@@ -125,18 +125,20 @@ export default {
             return;
           }
           if (newVal.length < this.loadedIndex) {
-            this.loadedIndex = 0;
-          }
-          if (
-            newVal.length > oldVal.length ||
-            newVal.length > this.loadedIndex
-          ) {
-            if (newVal.length === oldVal.length) {
-              this.resize(this.loadedIndex > 0 ? this.loadedIndex : null);
-              return;
-            }
-            this.resize(oldVal.length > 0 ? oldVal.length : null);
+            this.loadedIndex = newVal.length;
           }
+          this.resize(this.loadedIndex > 0 ? this.loadedIndex : null);
+          // discard code
+          // if (
+          //   newVal.length > oldVal.length ||
+          //   newVal.length > this.loadedIndex
+          // ) {
+          //   // if (newVal.length === oldVal.length) {
+          //   //   this.resize(this.loadedIndex > 0 ? this.loadedIndex : null);
+          //   //   return;
+          //   // }
+          //   // this.resize(oldVal.length > 0 ? oldVal.length : null);
+          // }
         }, 300);
       });
     },
@@ -156,6 +158,15 @@ export default {
             odiv.style.marginLeft = this.gutterWidth + "px";
           }
           this.columnWidth = this.width;
+        } else if (this.gutterWidth && !this.width) {
+          const width = Math.floor(
+            (this.root.offsetWidth - (col - 1) * this.gutterWidth) / col
+          );
+          if (i != 0) {
+            odiv.style.marginLeft = this.gutterWidth + "px";
+          }
+          odiv.style.width = width + "px";
+          this.columnWidth = width;
         } else {
           odiv.style.width = 100 / parseInt(col) + "%";
           this.columnWidth =
@@ -176,7 +187,6 @@ export default {
       var imgs = dom.getElementsByTagName("img");
       for (var i = 0; i < imgs.length; i++) {
         var lazySrc = imgs[i].getAttribute("lazy-src");
-        console.log("lazySrc", lazySrc);
         if (!imgs[i].getAttribute("src") && lazySrc) {
           var newImg = new Image();
           newImg.src = lazySrc;
@@ -186,7 +196,6 @@ export default {
             if (trueWidth) {
               imgs[i].style.height = imgColumnHeight + "px";
             }
-            console.log("imgs[i]", imgs[i], imgs[i].style);
           } else {
             await new Promise((resolve, reject) => {
               newImg.onload = function () {
@@ -327,11 +336,6 @@ export default {
           imgs[index].className = imgs[index].className + " animation";
           imgs[index].removeAttribute("lazy-src");
         }
-        console.log(
-          imgs[index].getBoundingClientRect().top,
-          this.viewHeight,
-          this.trueLazyDistance
-        );
       }
     },
     clearColumn() {

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "less-loader": "^5.0.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.1",
-    "vue-waterfall2": "^1.10.4"
+    "vue-waterfall2": "^1.10.5"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

diff --git a/src/App.vue b/src/App.vue
@@ -12,7 +12,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -151,7 +151,16 @@
       :height="'100vh'"
     >
       <template>
-        <div class="cell-item" v-for="(item, index) in data" :key="index">
+        <div
+          class="cell-item"
+          v-for="(item, index) in data"
+          :key="index"
+          @click="
+            () => {
+              toDelete(index);
+            }
+          "
+        >
           <img v-if="item.img" :src="item.img" alt="加载错误" />
           <div class="item-body">
             <div class="item-desc">{{ item.title }}</div>
@@ -204,13 +213,18 @@ export default {
   },
   computed: {
     itemWidth() {
-      return 133 * 0.5 * (document.documentElement.clientWidth / 375);
+      return 139 * 0.5 * (document.documentElement.clientWidth / 375);
     },
     gutterWidth() {
       return 10 * 0.5 * (document.documentElement.clientWidth / 375);
     },
   },
   methods: {
+    toDelete(index) {
+      console.log("this.data", this.data.length);
+      this.data.splice(index, 1);
+      console.log("this.data", this.data.length);
+    },
     finish() {
       console.error("finish");
     },

diff --git a/src/components/evaluateList.vue b/src/components/evaluateList.vue
@@ -58,6 +58,7 @@
     border-radius: 12px 12px 12px 12px;
     overflow: hidden;
     box-sizing: border-box;
+    margin-bottom: 20px;
     img {
       width: 100%;
       height: auto;
@@ -160,6 +161,7 @@
         :data="data"
         @loadmore="loadmore"
         :lazyDistance="50"
+        :gutterWidth="gutterWidth"
       >
         <template>
           <div class="cell-item" v-for="(item, index) in data" :key="index">

diff --git a/src/main.js b/src/main.js
@@ -5,8 +5,8 @@ import App from "./App";
 import router from "./router";
 
 Vue.config.productionTip = false;
-import waterfall from "vue-waterfall2";
-// import waterfall from "../lib";
+// import waterfall from "vue-waterfall2";
+import waterfall from "../lib";
 
 Vue.use(waterfall);
 /* eslint-disable no-new */

diff --git a/yarn.lock b/yarn.lock
@@ -6785,10 +6785,10 @@ vue-template-es2015-compiler@^1.6.0:
   resolved "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue-waterfall2@^1.10.4:
-  version "1.10.4"
-  resolved "https://registry.npmjs.org/vue-waterfall2/-/vue-waterfall2-1.10.4.tgz#04fe8d948157f11728239d5b01074bc81ec166fa"
-  integrity sha512-Hh2sGAJm69AlLD2q2MJJTeF0c4AFMdOJMrQW1BzEL5aI1zNmG6G3e0QCPnAfaAYgPKM7qIRGsV3+Si6RjbOKzg==
+vue-waterfall2@^1.10.5:
+  version "1.10.5"
+  resolved "http://registry.m.jd.com/vue-waterfall2/download/vue-waterfall2-1.10.5.tgz#e3f927430ce32c56b66f9687ed2263ef0d7a998d"
+  integrity sha1-4/knQwzjLFa2b5aH7SJj7w16mY0=
   dependencies:
     babel-runtime "^6.26.0"
     regenerator-runtime "^0.13.1"