照片墙开发记录
This commit is contained in:
结发受长生
parent
2e97817463
commit
f02fc05b1e
264
source/_posts/前端杂烩/照片墙开发记录.md
Normal file
264
source/_posts/前端杂烩/照片墙开发记录.md
Normal file
@ -0,0 +1,264 @@
|
||||
---
|
||||
title: 照片墙开发记录
|
||||
date: 2019-05-12 15:17:29
|
||||
tags:
|
||||
- 前端
|
||||
- Hexo
|
||||
categories:
|
||||
- 前端杂烩
|
||||
---
|
||||
|
||||
依稀记得刚使用hexo的时候, 大部分的照片墙解决方案还是调用**Instagram**的接口
|
||||
毕竟这是个很方便上传和管理照片的平台
|
||||
如今墙一天比一天高, 这方案也基本不灵了
|
||||
现在博客用上了对象存储作为图片库, 照片墙实现起来也可以有另一套办法了
|
||||
|
||||
<!-- more -->
|
||||
先整理一下思路, 大概是以下几个步骤
|
||||
1. 上传图片到对象存储仓库, 这个可以写个脚本跑一遍就可以了
|
||||
但是考虑到页面加载这些图片时候的性能问题
|
||||
计划是把100张图作为一组, 每组一个目录, 这个目录当中除了这100张图片, 还有一个json文件, 是该组的文件列表
|
||||
为动态加载提供方便
|
||||
2. 创建自定义页面, 这个hexo本身就支持, 直接在里面写html代码即可
|
||||
但是由于hexo本身对于md文件的渲染策略, 每一行都会加上`<br>`
|
||||
在普通文章里面没什么, 在这个纯html页面就会影响DOM结构, 修改hexo的渲染策略会影响所有页面
|
||||
所以要注意这个md文件正文不能有换行
|
||||
3. 照片墙页面的布局, 这个准备采用瀑布流的模式, 跟已被关闭的Google plus ~~(深切缅怀🕯)~~ 一样的布局结构
|
||||
4. 分页加载以及滚动加载的一些实现
|
||||
|
||||
### 上传图片
|
||||
根据这次的需要改造一下图片上传的js脚本
|
||||
```javascript
|
||||
const argv = {
|
||||
rootPath: 'F:\\WallPaper\\', // 本地图片所在位置
|
||||
prefix: 'photo-wall',
|
||||
step: 100
|
||||
}
|
||||
|
||||
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')
|
||||
|
||||
const client = new nos.NosClient(setting)
|
||||
|
||||
_uploadObject(imagesList)
|
||||
|
||||
/**
|
||||
* 上传文件对象
|
||||
* @param {Array} filesList 待上传的文件列表
|
||||
* @param {Number} index 索引值
|
||||
* @param {Array} group 文件的分组信息
|
||||
*/
|
||||
function _uploadObject(filesList, index=0, groups=[]) {
|
||||
if(index >= filesList.length) {
|
||||
groups[groups.length-1].end = index
|
||||
uploadList(filesList, groups)
|
||||
return
|
||||
}
|
||||
if(!groups.length) { // 对于空对象, 放入第一个分组
|
||||
groups.push({start:index})
|
||||
}
|
||||
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
|
||||
if((index + 1) % argv.step === 0) {
|
||||
// 到达一个分组的末尾
|
||||
groups[groups.length-1].end = index
|
||||
uploadList(filesList, groups)
|
||||
groups.push({start:index+1})
|
||||
}
|
||||
client.putObject({objectKey, body}).then(result => {
|
||||
// eTag是上传后远端校验的md5值, 用于和本地进行比对
|
||||
let eTag = result.eTag.replace(/"/g,'')
|
||||
if(filesList[index].md5 === eTag) {
|
||||
console.log(`${filesList[index].name} 上传成功, md5:${eTag}`)
|
||||
} else {
|
||||
console.warn(`${filesList[index].name} 上传出错, md5值不一致`)
|
||||
console.warn(`===> 本地文件: ${filesList[index].md5}, 接口返回: ${eTag}`)
|
||||
}
|
||||
_uploadObject(filesList, ++index, groups)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传文件列表json
|
||||
* @param {Array} filesList
|
||||
* @param {Array} groups
|
||||
*/
|
||||
function uploadList(filesList, groups) {
|
||||
client.putObject({
|
||||
objectKey: `${argv.prefix}/${groups.length}/list.json`,
|
||||
body: Buffer.from(JSON.stringify({
|
||||
start: groups[groups.length-1].start,
|
||||
end: groups[groups.length-1].end,
|
||||
files: filesList.slice(groups[groups.length-1].start, groups[groups.length-1].end+1)
|
||||
}))
|
||||
}).then(result => {
|
||||
console.log(result.eTag)
|
||||
})
|
||||
}
|
||||
```
|
||||
其中需要对文件名进行替换修改, 改为在该分组内的正确目录
|
||||
执行完成后, 对象存储仓库的photo-wall目录下就已经有若干个数字命名的子目录了
|
||||
每个子目录里面都有至多100张图片和一个json文件
|
||||
比如第一组中json文件的内容为
|
||||
```json
|
||||
{
|
||||
"start":0,
|
||||
"end":99,
|
||||
"files":[{"name":"xxx.png","md5":"xxxx"}...]
|
||||
}
|
||||
```
|
||||
|
||||
### 创建自定义页面
|
||||
在source目录下创建`photo_wall`目录, 其中创建`index.md`文件
|
||||
```md
|
||||
---
|
||||
title: 照片墙
|
||||
date: 2019-05-12 15:50:10
|
||||
pageid: PhotoWall
|
||||
---
|
||||
|
||||
<div id="photo-wall"></div><div id="load-top">正在加载ԅ( ¯་། ¯ԅ)</div>
|
||||
```
|
||||
这里写个**pageid**是为了方便在js当中区分自定义页面
|
||||
从而执行chunk的动态加载, 避免影响其他页面的加载速度
|
||||
|
||||
#### 瀑布流布局
|
||||
得益于浏览器对多列布局的良好实现, css写起来还是非常简单的
|
||||
```scss
|
||||
#photo-wall {
|
||||
margin: 0 auto;
|
||||
column-count: auto;
|
||||
column-width: 240px;
|
||||
column-gap: 20px;
|
||||
// 每一列图片包含层
|
||||
.item {
|
||||
margin-bottom: 20px;
|
||||
// 防止多列布局，分页媒体和多区域上下文中的意外中断
|
||||
break-inside: avoid;
|
||||
}
|
||||
// 图片
|
||||
.item-img {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
#load-top {
|
||||
color: $color9;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
列宽固定, 列数不固定, 根据容器的大小自动适配
|
||||
|
||||
### 滚动加载
|
||||
有一些第三方库实现了滚动加载, 但是尝试过之后发现无法与现有的整体布局很好地结合
|
||||
于是决定自己实现一下
|
||||
**photo-wall.js**
|
||||
```javascript
|
||||
import axios from 'axios'
|
||||
|
||||
var groupid = 1, currentIndex = 0, defaultStep = 20, scrollLock = false
|
||||
|
||||
// 滚动区域DOM
|
||||
const scrollDom = document.getElementById('container')
|
||||
// 作为底部标记的DOM
|
||||
const markDom = document.getElementById('footer')
|
||||
// 加载提示文字
|
||||
const loadTip = document.getElementById('load-top')
|
||||
|
||||
function loadMoreItems(step) {
|
||||
scrollLock = true //加载过程中锁定滚动加载
|
||||
loadTip.style.display = 'block'
|
||||
// 滚动到底部时调用
|
||||
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++) {
|
||||
imgItems += `<div class="item">
|
||||
<img class="item-img" src="${themeConfig.pictureCdn}/${res.data.files[index].name}" alt=""/>
|
||||
</div>`
|
||||
}
|
||||
if(index >= res.data.files.length) { // 已到达当前分组列表的末尾
|
||||
groupid++
|
||||
if(index<currentIndex+step) { // 如果加载的数据数量不足步长
|
||||
// 则需要再加载下一个分组, 下一个分组需要加载的图片数量是剩余的步长
|
||||
loadMoreItems(currentIndex + step - index)
|
||||
}
|
||||
} else {
|
||||
currentIndex = index
|
||||
}
|
||||
itemContainer.classList.add('item-container')
|
||||
itemContainer.insertAdjacentHTML('beforeend', imgItems)
|
||||
document.getElementById('photo-wall').appendChild(itemContainer)
|
||||
setTimeout(()=>{
|
||||
loadTip.style.display = 'none'
|
||||
scrollLock = false
|
||||
}, 2000)
|
||||
}).catch(res => { // 未加载到文件列表, 代表已经没有更多图片
|
||||
scrollLock = true
|
||||
loadTip.textContent = '没有更多图片啦/(ㄒoㄒ)/~~'
|
||||
})
|
||||
}
|
||||
|
||||
//检测是否具备滚动条加载数据块的条件
|
||||
function checkScrollSlide(){
|
||||
var scrollH = scrollDom.scrollTop || document.body.scrollTop || document.documentElement.scrollTop
|
||||
var clientHeight = document.body.clientHeight || document.documentElement.clientHeight
|
||||
var footerOffetTop = markDom.offsetTop
|
||||
return scrollH + clientHeight > footerOffetTop
|
||||
}
|
||||
|
||||
function init() {
|
||||
var _onscroll = scrollDom.onscroll
|
||||
var timer = null
|
||||
scrollDom.onscroll = function () {
|
||||
// 保留已有的滚动事件回调函数并在新的回调函数中进行调用
|
||||
typeof _onscroll === 'function' && _onscroll.apply(this, arguments)
|
||||
if(scrollLock) return
|
||||
if(timer) clearTimeout(timer)
|
||||
timer = setTimeout(()=>{
|
||||
if(checkScrollSlide()) {
|
||||
loadMoreItems(defaultStep)
|
||||
}
|
||||
timer = null
|
||||
}, 200)
|
||||
}
|
||||
loadMoreItems(defaultStep)
|
||||
}
|
||||
export default { init }
|
||||
```
|
||||
有几点需要注意
|
||||
1. 滚动事件需要使用**函数防抖**方式, 防止滚动事件频繁触发导致的性能问题
|
||||
2. 对已存在的滚动事件回调函数要注意保留和调用, 避免直接覆盖
|
||||
3. 记录当前分页加载所在的位置, 并在当前分组到达末尾的时候切换到下一个分组
|
||||
4. 当不存在下一个分组时, ajax获取下一个分组的json文件会返回404, 要在catch当中处理没有更多图片的交互逻辑
|
||||
5. 判断是否滚动到容器底部要添加不同浏览器的兼容
|
||||
|
||||
#### 动态引入photo-wall.js文件
|
||||
利用webpack的分块动态引入的功能
|
||||
```javascript
|
||||
if(window.themeConfig.pageid === 'PhotoWall') {
|
||||
// 自定义的照片墙页面
|
||||
import(/* webpackChunkName: "photo-wall" */ './photo-wall').then(PhotoWall => {
|
||||
PhotoWall.default.init()
|
||||
})
|
||||
}
|
||||
```
|
||||
注释中的`webpackChunkName`是webpack可以读取的分块打包声明
|
||||
该引入会被单独打包为一个chunk
|
||||
|
||||
### 效果
|
||||
|
||||
|
||||
感觉还有不少继续优化的空间, 至少图片的宽高可以在json文件里面记录下来
|
||||
生成包裹img的div时直接固定高度( 宽度由`column-width`指定 )
|
||||
避免加载过程中频繁打乱整体布局
|
||||
BIN
source/images/前端杂烩/照片墙.gif
Normal file
BIN
source/images/前端杂烩/照片墙.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
@ -1,6 +1,6 @@
|
||||
---
|
||||
title: 照片墙
|
||||
date: 2018-5-24 10:05:28
|
||||
date: 2019-05-12 15:50:10
|
||||
pageid: PhotoWall
|
||||
---
|
||||
|
||||
|
||||
@ -30,10 +30,11 @@ function loadMoreItems(step) {
|
||||
} else {
|
||||
currentIndex = index
|
||||
}
|
||||
itemContainer.classList.add('item-container')
|
||||
itemContainer.insertAdjacentHTML('beforeend', imgItems)
|
||||
document.getElementById('photo-wall').appendChild(itemContainer)
|
||||
loadTip.style.display = 'none'
|
||||
setTimeout(()=>{
|
||||
loadTip.style.display = 'none'
|
||||
scrollLock = false
|
||||
}, 2000)
|
||||
}).catch(res => { // 未加载到文件列表, 代表已经没有更多图片
|
||||
@ -55,6 +56,7 @@ function init() {
|
||||
var _onscroll = scrollDom.onscroll
|
||||
var timer = null
|
||||
scrollDom.onscroll = function () {
|
||||
// 保留已有的滚动事件回调函数并在新的回调函数中进行调用
|
||||
typeof _onscroll === 'function' && _onscroll.apply(this, arguments)
|
||||
if(scrollLock) return
|
||||
if(timer) clearTimeout(timer)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user