照片墙开发记录更新

source/_posts/前端杂烩/照片墙开发记录.md

@@ -28,6 +28,9 @@ categories:
 
 ### 上传图片
 根据这次的需要改造一下图片上传的js脚本
+跟之前的差不多, 不过这次引入一个[images](https://www.npmjs.com/package/images)库
+这个库有一些对图片进行操作的API, 准备用它来获取到图片的宽高, 也写入到json文件里面
+
 ```javascript
 const argv = {
   rootPath: 'F:\\WallPaper\\', // 本地图片所在位置
@@ -38,14 +41,12 @@ const argv = {
 const listImages = require('./list_images')
 // 当前本地存在的所有图片
 const imagesList = listImages(argv.rootPath, argv.prefix)
-// console.dir(imagesList)
-
 
 const setting = require('./auth_info.json'),
     fs = require('fs'),
     path = require('path'),
-    nos = require('@xgheaven/nos-node-sdk')
+    nos = require('@xgheaven/nos-node-sdk'),
-
+    images = require('images')
 const client = new nos.NosClient(setting)
 
 _uploadObject(imagesList)
@@ -65,6 +66,10 @@ function _uploadObject(filesList, index=0, groups=[]) {
   if(!groups.length) { // 对于空对象, 放入第一个分组
     groups.push({start:index})
   }
+  let img = images(path.resolve(argv.rootPath, filesList[index].name))
+  filesList[index].width = img.width()
+  filesList[index].height = img.height()
+
   let objectKey = filesList[index].name.replace(argv.prefix, `${argv.prefix}/${groups.length}`)
   let body = fs.createReadStream(path.resolve(argv.rootPath, filesList[index].name))
   filesList[index].name = objectKey
@@ -113,7 +118,7 @@ function uploadList(filesList, groups) {
 {
   "start":0,
   "end":99,
-  "files":[{"name":"xxx.png","md5":"xxxx"}...]
+  "files":[{"name":"xxx.png","md5":"xxxx","width":300,"height":200}...]
 }
 ```
 
@@ -189,10 +194,20 @@ function loadMoreItems(step) {
   axios.get(`${themeConfig.pictureCdn}/photo-wall/${groupid}/list.json`).then(res => {
     var itemContainer = document.createElement('div')
     var imgItems = '', index = currentIndex
-    for( ; index<currentIndex+step && index<res.data.files.length ; index++) {
+    while(index<currentIndex+step && index<res.data.files.length) {
-      imgItems += `<div class="item">
+      let imgHeight = null
+      if(res.data.files[index].width && res.data.files[index].height) {
+        let wrapperWidth = photoWallWrapper.getBoundingClientRect().width
+        // 列宽240px 列间距20px, 计算每列宽度
+        let columnWidth = (wrapperWidth + 20) / Math.floor((wrapperWidth + 20) / (240 + 20)) - 20
+        // 图片的实际显示高度
+        imgHeight = (columnWidth / res.data.files[index].width) * res.data.files[index].height
+        imgHeight = Math.round(imgHeight * 100) / 100 // 四舍五入保留2位小数
+      }
+      imgItems += `<div class="item" ${imgHeight ? 'style="height:' + imgHeight + 'px"' : ''}>
           <img class="item-img" src="${themeConfig.pictureCdn}/${res.data.files[index].name}" alt=""/>
       </div>`
+      index++
     }
     if(index >= res.data.files.length) { // 已到达当前分组列表的末尾
       groupid++
@@ -200,7 +215,7 @@ function loadMoreItems(step) {
         // 则需要再加载下一个分组, 下一个分组需要加载的图片数量是剩余的步长
         let tempIndex = currentIndex
         currentIndex = 0
-        loadMoreItems(currentIndex + step - index) 
+        loadMoreItems(tempIndex + step - index) 
       }
     } else {
       currentIndex = index
@@ -251,6 +266,9 @@ export default { init }
 3. 记录当前分页加载所在的位置, 并在当前分组到达末尾的时候切换到下一个分组
 4. 当不存在下一个分组时, ajax获取下一个分组的json文件会返回404, 要在catch当中处理没有更多图片的交互逻辑
 5. 判断是否滚动到容器底部要添加不同浏览器的兼容
+6. 之前记录下的图片宽高用于指定div在页面中的实际高度, 避免加载过程中频繁打乱整体布局
+( 因为图片还未加载完成的时候浏览器也不知道这个图片的实际尺寸 )
+7. ~~主要目标就是不使用jQuery~~
 
 #### 动态引入photo-wall.js文件
 利用webpack的分块动态引入的功能
@@ -267,7 +285,3 @@ if(window.themeConfig.pageid === 'PhotoWall') {
 
 ### 效果
 ![照片墙](/images/前端杂烩/照片墙.gif)
-
-感觉还有不少继续优化的空间, 至少图片的宽高可以在json文件里面记录下来
-生成包裹img的div时直接固定高度( 宽度由`column-width`指定 )
-避免加载过程中频繁打乱整体布局

themes/yilia/source-src/css/article-inner.scss

@@ -1,8 +1,5 @@
 .article-inner {
   border-color: #d1d1d1;
-	p {
-	  margin: 0 0 1.75em;
-  }
   // 目录标题
   h1,h2,h3,h4,h5,h6 {
     font-weight: 900;

themes/yilia/source-src/css/article-main.scss

@@ -2,54 +2,16 @@
 	position: relative;
 }
 
-@-webkit-keyframes cd-bounce-1 {
-  0% {
-    opacity: 0;
-    -webkit-transform: scale(1);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale(1.01);
-  }
-  100% {
-    -webkit-transform: scale(1);
-  }
-}
-@-moz-keyframes cd-bounce-1 {
-  0% {
-    opacity: 0;
-    -moz-transform: scale(1);
-  }
-  60% {
-    opacity: 1;
-    -moz-transform: scale(1.01);
-  }
-  100% {
-    -moz-transform: scale(1);
-  }
-}
 @keyframes cd-bounce-1 {
   0% {
     opacity: 0;
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
-    -ms-transform: scale(1);
-    -o-transform: scale(1);
     transform: scale(1);
   }
   60% {
     opacity: 1;
-    -webkit-transform: scale(1.01);
-    -moz-transform: scale(1.01);
-    -ms-transform: scale(1.01);
-    -o-transform: scale(1.01);
     transform: scale(1.01);
   }
   100% {
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
-    -ms-transform: scale(1);
-    -o-transform: scale(1);
     transform: scale(1);
   }
 }
@@ -77,9 +39,6 @@
   line-height: 35px;
   margin-bottom: 20px;
   font-size: 26px;
-  -webkit-transition: color 0.3s;
-  -moz-transition: color 0.3s;
-  -o-transition: color 0.3s;
   transition: color 0.3s;
 }
 

themes/yilia/source-src/css/highlight.scss

@@ -60,7 +60,6 @@
   }
 }
 .article-entry .highlight figcaption {
-  color: highlight-comment;
   line-height: 1em;
   margin-bottom: 1em;
   &::after {
@@ -108,7 +107,6 @@
 }
 .article-entry .gist .gist-file .gist-meta {
   background: #272822;
-  color: highlight-comment;
   font: 0.85em "Helvetica Neue", Helvetica, Arial, sans-serif;
   text-shadow: 0 0;
   padding: 0;
@@ -123,7 +121,7 @@
   text-decoration: underline;
 }
 pre .comment {
-  color: #368022;
+  color: #6A9955;
 }
 pre .keyword,
 pre .function .keyword,

themes/yilia/source-src/js/photo-wall.js

@@ -23,7 +23,9 @@ function loadMoreItems(step) {
         let wrapperWidth = photoWallWrapper.getBoundingClientRect().width
         // 列宽240px 列间距20px, 计算每列宽度
         let columnWidth = (wrapperWidth + 20) / Math.floor((wrapperWidth + 20) / (240 + 20)) - 20
+        // 图片的实际显示高度
         imgHeight = (columnWidth / res.data.files[index].width) * res.data.files[index].height
+        imgHeight = Math.round(imgHeight * 100) / 100 // 四舍五入保留2位小数
       }
       imgItems += `<div class="item" ${imgHeight ? 'style="height:' + imgHeight + 'px"' : ''}>
           <img class="item-img" src="${themeConfig.pictureCdn}/${res.data.files[index].name}" alt=""/>