111 lines
4.3 KiB
JavaScript
111 lines
4.3 KiB
JavaScript
import axios from 'axios'
|
|
import PhotoSwipe from '../lib/photoswipe/photoswipe'
|
|
import PhotoSwipeUI_Default from '../lib/photoswipe/photoswipe-ui-default'
|
|
|
|
var totalIndex = 0, defaultStep = 20, scrollLock = false
|
|
|
|
// 容器DIV
|
|
const photoWallWrapper = document.getElementById('photo-wall')
|
|
// 滚动区域DOM
|
|
const scrollDom = document.getElementById('container')
|
|
// 作为底部标记的DOM
|
|
const markDom = document.getElementById('footer')
|
|
// 加载提示文字
|
|
const loadTip = document.getElementById('load-tip')
|
|
|
|
// 相册集
|
|
const items = []
|
|
function getThumbBoundsFn(target) {
|
|
return function(index) { // index是当前点击的图片在相册中的索引值
|
|
var pageYScroll = window.pageYOffset || document.documentElement.scrollTop
|
|
var rect = target.getBoundingClientRect()
|
|
return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}
|
|
}
|
|
}
|
|
var pswpElement = document.querySelectorAll('.pswp')[0]
|
|
function loadMoreItems(step) {
|
|
scrollLock = true //加载过程中锁定滚动加载
|
|
loadTip.style.display = 'block'
|
|
// 滚动到底部时调用
|
|
axios.get(`${themeConfig.root}api/photos`, {params: {start:totalIndex, limit:step}}).then(res => {
|
|
var itemContainer = document.createElement('div')
|
|
for(let index = 0 ; index<res.data.data.length && totalIndex<res.data.total ; index++,totalIndex++ ) {
|
|
let imgHeight = null, imgFile = res.data.data[index],
|
|
imgSrc = `${themeConfig.pictureCdn}/${imgFile.name}`,
|
|
imgThumbnail = imgFile.thumbnail ? `${themeConfig.pictureCdn}/${imgFile.thumbnail}` : imgSrc
|
|
let wrapperWidth = photoWallWrapper.getBoundingClientRect().width
|
|
// 列宽240px 列间距20px, 计算每列宽度
|
|
let columnWidth = (wrapperWidth + 20) / Math.floor((wrapperWidth + 20) / (240 + 20)) - 20
|
|
// 图片的实际显示高度
|
|
imgHeight = (columnWidth / imgFile.width) * imgFile.height
|
|
imgHeight = Math.round(imgHeight * 100) / 100 // 四舍五入保留2位小数
|
|
items.push({
|
|
msrc: imgThumbnail, // 缩略图的地址
|
|
src: imgSrc,
|
|
w: imgFile.width,
|
|
h: imgFile.height,
|
|
title: imgFile.name
|
|
})
|
|
let imgItemDiv = document.createElement('div'), imgItem = document.createElement('img')
|
|
imgItemDiv.classList.add('item')
|
|
imgItemDiv.style.height = imgHeight+'px'
|
|
imgItem.classList.add('item-img')
|
|
imgItem.setAttribute('src', imgThumbnail)
|
|
imgItem.addEventListener('click', (function(totalIndex){
|
|
return function(e) {
|
|
// slider展开状态
|
|
if (document.querySelector('.left-col.show')) return
|
|
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
|
|
index: totalIndex,
|
|
bgOpacity: 0.8,
|
|
getThumbBoundsFn: getThumbBoundsFn(e.target)
|
|
})
|
|
gallery.init()
|
|
}
|
|
})(totalIndex))
|
|
imgItemDiv.appendChild(imgItem)
|
|
itemContainer.appendChild(imgItemDiv)
|
|
}
|
|
itemContainer.classList.add('item-container')
|
|
// itemContainer.insertAdjacentHTML('beforeend', imgItems)
|
|
photoWallWrapper.appendChild(itemContainer)
|
|
if( totalIndex >= res.data.total ) {
|
|
loadTip.textContent = '没有更多图片啦/(ㄒoㄒ)/~~'
|
|
} else {
|
|
setTimeout(()=>{
|
|
loadTip.style.display = 'none'
|
|
scrollLock = false
|
|
}, 2000)
|
|
}
|
|
}).catch(res => {
|
|
scrollLock = false
|
|
loadTip.textContent = '图片加载失败, 请稍后重试...'
|
|
})
|
|
}
|
|
|
|
//检测是否具备滚动条加载数据块的条件
|
|
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 }
|