sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

照片墙引入缩略图

Browse Source
This commit is contained in:
结发受长生 2019-05-16 09:29:36 +08:00
parent 559c17ef0d
commit f440503fa8
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
themes/yilia/source-src/js/photo-wall.js
View File

@ -31,25 +31,27 @@ function loadMoreItems(step) {
var itemContainer = document.createElement('div') var itemContainer = document.createElement('div')
var index = currentIndex var index = currentIndex
while(index<currentIndex+step && index<res.data.files.length) { while(index<currentIndex+step && index<res.data.files.length) {
let imgHeight = null, imgUrl = `${themeConfig.pictureCdn}/${res.data.files[index].name}` let imgHeight = null, imgFile = res.data.files[index],
imgSrc = `${themeConfig.pictureCdn}/${imgFile.name}`,
imgThumbnail = imgFile.thumbnail ? `${themeConfig.pictureCdn}/${imgFile.thumbnail}` : imgSrc
let wrapperWidth = photoWallWrapper.getBoundingClientRect().width let wrapperWidth = photoWallWrapper.getBoundingClientRect().width
// 列宽240px 列间距20px, 计算每列宽度 // 列宽240px 列间距20px, 计算每列宽度
let columnWidth = (wrapperWidth + 20) / Math.floor((wrapperWidth + 20) / (240 + 20)) - 20 let columnWidth = (wrapperWidth + 20) / Math.floor((wrapperWidth + 20) / (240 + 20)) - 20
// 图片的实际显示高度 // 图片的实际显示高度
imgHeight = (columnWidth / res.data.files[index].width) * res.data.files[index].height imgHeight = (columnWidth / imgFile.width) * imgFile.height
imgHeight = Math.round(imgHeight * 100) / 100 // 四舍五入保留2位小数 imgHeight = Math.round(imgHeight * 100) / 100 // 四舍五入保留2位小数
items.push({ items.push({
msrc: imgUrl, // 缩略图的地址(在动画过程中显示的是缩略图, 这里暂且用相同的地址了) msrc: imgThumbnail, // 缩略图的地址
src: imgUrl, src: imgSrc,
w: res.data.files[index].width, w: imgFile.width,
h: res.data.files[index].height, h: imgFile.height,
title: res.data.files[index].name title: imgFile.name
}) })
let imgItemDiv = document.createElement('div'), imgItem = document.createElement('img') let imgItemDiv = document.createElement('div'), imgItem = document.createElement('img')
imgItemDiv.classList.add('item') imgItemDiv.classList.add('item')
imgItemDiv.style.height = imgHeight+'px' imgItemDiv.style.height = imgHeight+'px'
imgItem.classList.add('item-img') imgItem.classList.add('item-img')
imgItem.setAttribute('src', imgUrl) imgItem.setAttribute('src', imgThumbnail)
imgItem.addEventListener('click', (function(totalIndex){ imgItem.addEventListener('click', (function(totalIndex){
return function(e) { return function(e) {
// slider展开状态 // slider展开状态