From 12daa8ec41f62e35643cbf096632ca410cd831ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BB=93=E5=8F=91=E5=8F=97=E9=95=BF=E7=94=9F?= Date: Mon, 13 May 2019 16:32:41 +0800 Subject: [PATCH] =?UTF-8?q?=E7=85=A7=E7=89=87=E5=A2=99=E5=BC=80=E5=8F=91?= =?UTF-8?q?=E8=AE=B0=E5=BD=95=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/_posts/前端杂烩/照片墙开发记录.md | 38 +++++++++++------ .../yilia/source-src/css/article-inner.scss | 3 -- themes/yilia/source-src/css/article-main.scss | 41 ------------------- themes/yilia/source-src/css/highlight.scss | 4 +- themes/yilia/source-src/js/photo-wall.js | 2 + 5 files changed, 29 insertions(+), 59 deletions(-) diff --git a/source/_posts/前端杂烩/照片墙开发记录.md b/source/_posts/前端杂烩/照片墙开发记录.md index 0d47f29..a6af73d 100644 --- a/source/_posts/前端杂烩/照片墙开发记录.md +++ b/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 + while(index ` + 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`指定 ) -避免加载过程中频繁打乱整体布局 \ No newline at end of file diff --git a/themes/yilia/source-src/css/article-inner.scss b/themes/yilia/source-src/css/article-inner.scss index 032d8f8..90b5da7 100644 --- a/themes/yilia/source-src/css/article-inner.scss +++ b/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; diff --git a/themes/yilia/source-src/css/article-main.scss b/themes/yilia/source-src/css/article-main.scss index f1a5ca1..631e71f 100644 --- a/themes/yilia/source-src/css/article-main.scss +++ b/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; } diff --git a/themes/yilia/source-src/css/highlight.scss b/themes/yilia/source-src/css/highlight.scss index e147a66..0f2d528 100644 --- a/themes/yilia/source-src/css/highlight.scss +++ b/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, diff --git a/themes/yilia/source-src/js/photo-wall.js b/themes/yilia/source-src/js/photo-wall.js index 39b4477..4fcae4a 100644 --- a/themes/yilia/source-src/js/photo-wall.js +++ b/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 += `