优化图库瀑布效果
This commit is contained in:
1152958806@qq.com
parent
e25d5f14bd
commit
cbedb51b4a
|
|
@ -78,169 +78,6 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 代碼
|
||||
* 只適用於Hexo默認的代碼渲染
|
||||
*/
|
||||
// const addHighlightTool = function () {
|
||||
// const highLight = GLOBAL_CONFIG.highlight
|
||||
// if (!highLight) return
|
||||
//
|
||||
// const isHighlightCopy = highLight.highlightCopy
|
||||
// const isHighlightLang = highLight.highlightLang
|
||||
// const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
|
||||
// const highlightHeightLimit = highLight.highlightHeightLimit
|
||||
// const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
|
||||
// const $figureHighlight = highLight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
|
||||
//
|
||||
// if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return
|
||||
//
|
||||
// const isPrismjs = highLight.plugin === 'prismjs'
|
||||
//
|
||||
// let highlightShrinkEle = ''
|
||||
// let highlightCopyEle = ''
|
||||
// const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
|
||||
//
|
||||
// if (isHighlightShrink !== undefined) {
|
||||
// highlightShrinkEle = `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>`
|
||||
// }
|
||||
//
|
||||
// if (isHighlightCopy) {
|
||||
// highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-copy copy-button"></i>'
|
||||
// }
|
||||
//
|
||||
// const copy = (text, ctx) => {
|
||||
// if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
|
||||
// document.execCommand('copy')
|
||||
// if (GLOBAL_CONFIG.Snackbar !== undefined) {
|
||||
// btf.snackbarShow(GLOBAL_CONFIG.copy.success)
|
||||
// } else {
|
||||
// const prevEle = ctx.previousElementSibling
|
||||
// prevEle.innerText = GLOBAL_CONFIG.copy.success
|
||||
// prevEle.style.opacity = 1
|
||||
// setTimeout(() => {
|
||||
// prevEle.style.opacity = 0
|
||||
// }, 700)
|
||||
// }
|
||||
// } else {
|
||||
// if (GLOBAL_CONFIG.Snackbar !== undefined) {
|
||||
// btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
|
||||
// } else {
|
||||
// ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// // click events
|
||||
// const highlightCopyFn = (ele) => {
|
||||
// const $buttonParent = ele.parentNode
|
||||
// $buttonParent.classList.add('copy-true')
|
||||
// const selection = window.getSelection()
|
||||
// const range = document.createRange()
|
||||
// if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0])
|
||||
// else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0])
|
||||
// selection.removeAllRanges()
|
||||
// selection.addRange(range)
|
||||
// const text = selection.toString()
|
||||
// copy(text, ele.lastChild)
|
||||
// selection.removeAllRanges()
|
||||
// $buttonParent.classList.remove('copy-true')
|
||||
// }
|
||||
//
|
||||
// const highlightShrinkFn = (ele) => {
|
||||
// const $nextEle = [...ele.parentNode.children].slice(1)
|
||||
// ele.firstChild.classList.toggle('closed')
|
||||
// if (btf.isHidden($nextEle[$nextEle.length - 1])) {
|
||||
// $nextEle.forEach(e => {
|
||||
// e.style.display = 'block'
|
||||
// })
|
||||
// } else {
|
||||
// $nextEle.forEach(e => {
|
||||
// e.style.display = 'none'
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// const highlightToolsFn = function (e) {
|
||||
// const $target = e.target.classList
|
||||
// if ($target.contains('expand')) highlightShrinkFn(this)
|
||||
// else if ($target.contains('copy-button')) highlightCopyFn(this)
|
||||
// }
|
||||
//
|
||||
// const expandCode = function () {
|
||||
// this.classList.toggle('expand-done')
|
||||
// }
|
||||
//
|
||||
// function createEle(lang, item, service) {
|
||||
// const fragment = document.createDocumentFragment()
|
||||
//
|
||||
// if (isShowTool) {
|
||||
// const hlTools = document.createElement('div')
|
||||
// hlTools.className = `highlight-tools ${highlightShrinkClass}`
|
||||
// hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle
|
||||
// hlTools.addEventListener('click', highlightToolsFn)
|
||||
// fragment.appendChild(hlTools)
|
||||
// }
|
||||
//
|
||||
// if (highlightHeightLimit && item.offsetHeight > highlightHeightLimit + 30) {
|
||||
// const ele = document.createElement('div')
|
||||
// ele.className = 'code-expand-btn'
|
||||
// ele.innerHTML = '<i class="fas fa-angle-double-down"></i>'
|
||||
// ele.addEventListener('click', expandCode)
|
||||
// fragment.appendChild(ele)
|
||||
// }
|
||||
//
|
||||
// if (service === 'hl') {
|
||||
// item.insertBefore(fragment, item.firstChild)
|
||||
// } else {
|
||||
// item.parentNode.insertBefore(fragment, item)
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// if (isHighlightLang) {
|
||||
// if (isPrismjs) {
|
||||
// $figureHighlight.forEach(function (item) {
|
||||
// const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code'
|
||||
// const highlightLangEle = `<div class="code-lang">${langName}</div>`
|
||||
// btf.wrap(item, 'figure', '', 'highlight')
|
||||
// createEle(highlightLangEle, item)
|
||||
// })
|
||||
// } else {
|
||||
// $figureHighlight.forEach(function (item) {
|
||||
// let langName = item.getAttribute('class').split(' ')[1]
|
||||
// if (langName === 'plain' || langName === undefined) langName = 'Code'
|
||||
// const highlightLangEle = `<div class="code-lang">${langName}</div>`
|
||||
// createEle(highlightLangEle, item, 'hl')
|
||||
// })
|
||||
// }
|
||||
// } else {
|
||||
// if (isPrismjs) {
|
||||
// $figureHighlight.forEach(function (item) {
|
||||
// btf.wrap(item, 'figure', '', 'highlight')
|
||||
// createEle('', item)
|
||||
// })
|
||||
// } else {
|
||||
// $figureHighlight.forEach(function (item) {
|
||||
// createEle('', item, 'hl')
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
/**
|
||||
* PhotoFigcaption
|
||||
*/
|
||||
// function addPhotoFigcaption() {
|
||||
// document.querySelectorAll('#article-container img').forEach(function (item) {
|
||||
// const parentEle = item.parentNode
|
||||
// if (!parentEle.parentNode.classList.contains('justified-gallery')) {
|
||||
// const ele = document.createElement('div')
|
||||
// ele.className = 'img-alt is-center'
|
||||
// ele.textContent = item.getAttribute('alt')
|
||||
// parentEle.insertBefore(ele, item.nextSibling)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
/**
|
||||
* justified-gallery 圖庫排版
|
||||
|
|
@ -249,26 +86,43 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
let detectJgJsLoad = false
|
||||
const runJustifiedGallery = function (ele) {
|
||||
const $justifiedGallery = $(ele)
|
||||
const $imgList = $justifiedGallery.find('img')
|
||||
$imgList.unwrap()
|
||||
if ($imgList.length) {
|
||||
$imgList.each(function (i, o) {
|
||||
if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
|
||||
$(o).wrap('<div></div>')
|
||||
})
|
||||
}
|
||||
|
||||
if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
|
||||
if (detectJgJsLoad) btf.initJustifiedGallerys(ele)
|
||||
else {
|
||||
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
|
||||
$.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
|
||||
btf.initJustifiedGallery($justifiedGallery)
|
||||
|
||||
btf.initJustifiedGallerys(ele)
|
||||
})
|
||||
detectJgJsLoad = true
|
||||
}
|
||||
}
|
||||
|
||||
// let detectJgJsLoad = false
|
||||
// const runJustifiedGallery = function (ele) {
|
||||
// const $justifiedGallery = $(ele)
|
||||
// const $imgList = $justifiedGallery.find('img')
|
||||
// $imgList.unwrap()
|
||||
// if ($imgList.length) {
|
||||
// $imgList.each(function (i, o) {
|
||||
// if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
|
||||
// $(o).wrap('<div class="fj-gallery-item"></div>')
|
||||
// })
|
||||
// }
|
||||
|
||||
// const $gallery = document.querySelectorAll('.gallery')
|
||||
|
||||
// if (detectJgJsLoad) btf.initJustifiedGallerys($gallery)
|
||||
// else {
|
||||
// $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
|
||||
// $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
|
||||
|
||||
// btf.initJustifiedGallerys($gallery)
|
||||
// })
|
||||
// detectJgJsLoad = true
|
||||
// }
|
||||
// }
|
||||
|
||||
/**
|
||||
* fancybox和 mediumZoom
|
||||
*/
|
||||
|
|
@ -322,7 +176,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.site-card-avatar):not(.flink-item-info) > img, #article-container > img,.bber-content-img > img')
|
||||
: []
|
||||
const fbLengthNoZero = $fancyboxEle.length > 0
|
||||
const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
|
||||
const $jgEle = document.querySelectorAll('#article-container .gallery')
|
||||
const jgLengthNoZero = $jgEle.length > 0
|
||||
|
||||
if (jgLengthNoZero || fbLengthNoZero) {
|
||||
|
|
|
|||
|
|
@ -224,6 +224,19 @@ var btf = {
|
|||
}
|
||||
})
|
||||
},
|
||||
initJustifiedGallerys: function (selector) {
|
||||
selector.forEach((function(t) {
|
||||
btf.isHidden(t) || fjGallery(t, {
|
||||
itemSelector: ".fj-gallery-item",
|
||||
rowHeight: 240,
|
||||
gutter: 4,
|
||||
onJustify: function() {
|
||||
this.$container.style.opacity = "1"
|
||||
}
|
||||
})
|
||||
}
|
||||
))
|
||||
},
|
||||
|
||||
diffDate: (d, more = false) => {
|
||||
const dateNow = new Date()
|
||||
|
|
|
|||
|
|
@ -200,8 +200,8 @@
|
|||
},
|
||||
jQuery: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js',
|
||||
justifiedGallery: {
|
||||
js: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js',
|
||||
css: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.css'
|
||||
js: 'https://npm.elemecdn.com/flickr-justified-gallery@2.1.2/dist/fjGallery.min.js',
|
||||
css: 'https://npm.elemecdn.com/flickr-justified-gallery@2.1.2/dist/fjGallery.css'
|
||||
},
|
||||
fancybox: {
|
||||
js: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js',
|
||||
|
|
|
|||
|
|
@ -21,99 +21,129 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="photos">
|
||||
<div id="article-container">
|
||||
<section class="timeline page-1">
|
||||
<div class="type-gallery">
|
||||
<div class="gallery">
|
||||
<th:block th:each="group : ${groups}">
|
||||
<ul class="list" id="waterfall"
|
||||
<th:block
|
||||
th:if="${#strings.toString(group.spec.displayName)}==${#strings.toString(param.photo_group_name)}">
|
||||
<li class="item" th:each="photo : ${group.photos}">
|
||||
<img th:src="${photo.spec.url}">
|
||||
<span class="photo-title" th:text="${photo.spec.displayName}"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="fj-gallery-item" th:each="photo : ${group.photos}">
|
||||
<div class="tag-address">[[${photo.spec.displayName}]]</div>
|
||||
<img th:src="${photo.spec.url}" th:alt="${photo.spec.description}"
|
||||
th:title="${photo.spec.description}">
|
||||
|
||||
</div>
|
||||
</th:block>
|
||||
</th:block>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>heo.reflashEssayWaterFall();</script>
|
||||
<style>
|
||||
#photos {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#photos .timeline #waterfall.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#photos .timeline #waterfall {
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#photos ul.list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#photos .timeline ul li.item {
|
||||
position: relative;
|
||||
width: 24.35%;
|
||||
margin: 4px;
|
||||
border-radius: 12px;
|
||||
transition: 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
#article-container .type-gallery {
|
||||
overflow: hidden;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#photos .timeline ul li:hover img {
|
||||
transform: scale(1.1);
|
||||
#content-inner .gallery {
|
||||
margin: 0 0 16px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
#photos .timeline ul li.item img {
|
||||
width: 100%;
|
||||
animation: fadeIn 1s;
|
||||
#content-inner .gallery .fj-gallery {
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity=0)
|
||||
}
|
||||
|
||||
|
||||
span.photo-title {
|
||||
bottom: 4px;
|
||||
border-radius: 0 8px 0 8px;
|
||||
#content-inner .gallery .fj-gallery .img-alt {
|
||||
display: none
|
||||
}
|
||||
|
||||
span.photo-title {
|
||||
max-width: calc(100% - 7px);
|
||||
line-height: 1.8;
|
||||
#content-inner .gallery .fj-gallery.lazyload+button {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
#content-inner .gallery .fj-gallery .gallery-data {
|
||||
opacity: 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity=0);
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
#content-inner .gallery button {
|
||||
display: none;
|
||||
margin-top: 25px;
|
||||
padding: 10px;
|
||||
width: 9em;
|
||||
border-radius: 5px;
|
||||
background: var(--btn-bg);
|
||||
color: var(--btn-color);
|
||||
font-weight: 700;
|
||||
font-size: 1.1em;
|
||||
-webkit-transition: all .3s;
|
||||
-moz-transition: all .3s;
|
||||
-o-transition: all .3s;
|
||||
-ms-transition: all .3s;
|
||||
transition: all .3s
|
||||
}
|
||||
|
||||
#content-inner .gallery button>* {
|
||||
-webkit-transition: all .4s;
|
||||
-moz-transition: all .4s;
|
||||
-o-transition: all .4s;
|
||||
-ms-transition: all .4s;
|
||||
transition: all .4s
|
||||
}
|
||||
|
||||
#content-inner .gallery button i {
|
||||
opacity: 1;
|
||||
-ms-filter: none;
|
||||
filter: none;
|
||||
font-size: 1.1rem
|
||||
}
|
||||
|
||||
#content-inner .gallery button:hover {
|
||||
background: var(--btn-hover-color)
|
||||
}
|
||||
|
||||
#content-inner .gallery button:hover i {
|
||||
margin-left: 2px
|
||||
}
|
||||
|
||||
#article-container .tag-address {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
font-size: 14px;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
padding: 0 8px;
|
||||
color: #fff;
|
||||
animation: fadeIn 1s;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 8px;
|
||||
background: var(--heo-black-op);
|
||||
font-size: 12px;
|
||||
color: var(--heo-white);
|
||||
transition: .3s;
|
||||
z-index: 1;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
100% {
|
||||
opacity: 1
|
||||
}
|
||||
img {
|
||||
border-style: none;
|
||||
border-radius: 8px;
|
||||
max-width: 100%;
|
||||
transition: all .2s ease 0s;
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-ms-user-drag: none;
|
||||
user-drag: none
|
||||
}
|
||||
</style>
|
||||
<!--/* 评论组件 */-->
|
||||
<!--/* 评论组件 */-->
|
||||
<th:block
|
||||
th:replace="~{modules/comment :: comment(group = 'content.halo.run',
|
||||
<th:block th:replace="~{modules/comment :: comment(group = 'content.halo.run',
|
||||
kind = 'SinglePage',
|
||||
name = 'moments',
|
||||
allowComment = true)}"/>
|
||||
allowComment = true)}" />
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in New Issue