From 0df7af216c387ea3c0fe34ff3e39ac18a9497091 Mon Sep 17 00:00:00 2001 From: jiewenhuang Date: Mon, 6 Nov 2023 15:52:28 +0800 Subject: [PATCH] =?UTF-8?q?update:=E4=BC=98=E5=8C=96=E5=9B=BE=E5=BA=93?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/assets/css/min/photos.min.css | 2 +- templates/assets/css/photos.less | 34 +++ templates/assets/js/min/photos.min.js | 2 +- templates/assets/js/photos.js | 324 ++++++------------------ templates/photos.html | 14 +- 5 files changed, 124 insertions(+), 252 deletions(-) diff --git a/templates/assets/css/min/photos.min.css b/templates/assets/css/min/photos.min.css index a54d128..9f2c982 100644 --- a/templates/assets/css/min/photos.min.css +++ b/templates/assets/css/min/photos.min.css @@ -1 +1 @@ -.joe_photos__type{position:relative;margin-bottom:15px;padding:60px 15px 15px;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow)}.joe_photos__type-title{position:absolute;top:15px;left:-10px;height:30px;padding:0 12px;color:#fff;font-weight:500;line-height:30px;background:var(--theme);border-radius:2px 2px 2px 0;box-shadow:2px 5px 10px rgba(49,58,70,0.15);user-select:none}.joe_photos__type-title::before{position:absolute;bottom:-10px;left:-10px;border-color:var(--theme) transparent transparent;border-style:solid;border-width:10px;transform:rotate(90deg);content:""}.joe_photos__type-title .joe-font{vertical-align:bottom}.joe_photos__type-list{display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));gap:10px;padding-top:15px;border-top:1px solid var(--classC)}.joe_photos__type-list .item{height:28px;padding:0 15px;overflow:hidden;color:var(--routine);font-size:12px;line-height:28px;white-space:nowrap;text-align:center;text-overflow:ellipsis;background:var(--classD);border-radius:14px;cursor:pointer;transition:color .35s,background .35s,box-shadow .35s,transform .35s;user-select:none}.joe_photos__type-list .item.active{color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1);transform:translateY(-2px)}.joe_photos__type-list .item:hover{box-shadow:0 5px 5px rgba(0,0,0,0.1);transform:translateY(-2px)}.joe_photos__type-list .error{color:var(--routine);text-align:center;user-select:none}.joe_photos__gallery{position:relative;width:100% !important;margin:0 auto}.joe_photos__gallery .item{display:block;min-height:50px;overflow:hidden;background:var(--background);border-radius:var(--radius-wrap)}.joe_photos__gallery .item img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease !important}.joe_photos__gallery .item .tit{position:absolute;bottom:0;left:0;z-index:1;width:100%;padding:6px 10px;overflow:hidden;color:#fff;font-size:14px;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(0deg, #151515, transparent 80%)}.joe_photos__gallery .item .team{position:absolute;top:6px;right:6px;z-index:1;padding:2px 4px;overflow:hidden;color:#fff;font-size:13px;white-space:nowrap;text-overflow:ellipsis;background:#5299a5;border-radius:2px}.joe_photos__gallery .item .info{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;padding:20px;color:#fff;opacity:0;transition:opacity .35s}.joe_photos__gallery .item .info p{display:none;margin-bottom:5px;animation-duration:.3s}.joe_photos__gallery .item .info p:nth-child(2){animation-delay:.2s}.joe_photos__gallery .item .info p:nth-child(3){animation-delay:.3s}.joe_photos__gallery .item .info p i{position:relative;top:2px;float:left;margin-right:5px}.joe_photos__gallery .item .info p .joe-icon-shijian{top:0}.joe_photos__gallery .item .info p span{display:block;overflow:hidden}.joe_photos__gallery .item::before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:rgba(0,0,0,0);transition:background .35s;content:""}.joe_photos__gallery .item:hover img{transform:scale(1.2)}.joe_photos__gallery .item:hover::before{background:rgba(0,0,0,0.5);backdrop-filter:blur(1px)}.joe_photos__gallery .item:hover .info{opacity:1}.joe_photos__gallery .item:hover .info p{display:block}.joe_photos__gallery .masonry-item{width:30%}.joe_photos__list{display:grid;grid-template-columns:repeat(4, 1fr);gap:10px}.joe_photos__list .item{position:relative;display:block;overflow:hidden;background:var(--background);border-radius:var(--radius-wrap)}.joe_photos__list .item img{width:100%;height:100%;min-height:50px;object-fit:cover;transition:transform 1s}.joe_photos__list .item .tit{position:absolute;bottom:0;left:0;z-index:1;width:100%;padding:6px 10px;overflow:hidden;color:#fff;font-size:14px;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(0deg, #151515, transparent 80%)}.joe_photos__list .item .team{position:absolute;top:6px;right:6px;z-index:1;padding:2px 4px;overflow:hidden;color:#fff;font-size:13px;white-space:nowrap;text-overflow:ellipsis;background:#5299a5;border-radius:2px}.joe_photos__list .item .info{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;padding:20px;color:#fff;opacity:0;transition:opacity .35s}.joe_photos__list .item .info p{display:none;margin-bottom:5px;animation-duration:.3s}.joe_photos__list .item .info p:nth-child(2){animation-delay:.2s}.joe_photos__list .item .info p:nth-child(3){animation-delay:.3s}.joe_photos__list .item .info p i{position:relative;top:2px;float:left;margin-right:5px}.joe_photos__list .item .info p .joe-icon-shijian{top:0}.joe_photos__list .item .info p span{display:block;overflow:hidden}.joe_photos__list .item::before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:rgba(0,0,0,0);transition:background .35s;content:""}.joe_photos__list .item::after{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDQ1IDQ1IiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj48Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSI2IiBzdHJva2Utb3BhY2l0eT0iMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMTswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMjswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjYiIHN0cm9rZS1vcGFjaXR5PSIwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iM3MiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjNzIiBkdXI9IjNzIiB2YWx1ZXM9IjE7MCIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGJlZ2luPSIzcyIgZHVyPSIzcyIgdmFsdWVzPSIyOzAiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iOCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjBzIiBkdXI9IjEuNXMiIHZhbHVlcz0iNjsxOzI7Mzs0OzU7NiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PC9zdmc+);background-repeat:no-repeat;background-position:right bottom;background-size:20% auto;transform:scale(2);opacity:0;transition:transform .35s,opacity .35s;content:""}.joe_photos__list .item:hover img{transform:scale(1.2)}.joe_photos__list .item:hover::before{background:rgba(0,0,0,0.5);backdrop-filter:blur(1px)}.joe_photos__list .item:hover::after{transform:scale(1);opacity:1}.joe_photos__list .item:hover .info{opacity:1}.joe_photos__list .item:hover .info p{display:block}.joe_photos__list:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_photos__list:empty::after{display:block;width:70px;height:70px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);background-repeat:no-repeat;background-size:100% 100%;content:""}.joe_photos__list.waterfall{position:relative}.joe_photos__list.waterfall .item img{height:auto}.joe_photos__filter{position:relative;top:12px;display:block}.joe_photos__filter ul{margin:0 0 20px 0;padding:0;font-size:14px;letter-spacing:.05em;list-style:none;user-select:none}.joe_photos__filter ul li{position:relative;display:inline-block;margin:0 20px 12px 0;vertical-align:bottom;font-size:0}.joe_photos__filter ul li:after{position:absolute;right:0;bottom:-4px;left:0;width:0;height:3px;background:var(--theme);border-radius:3px;transform:scale(0, 1);transform-origin:50% 0;transition:transform .35s;content:"";will-change:transform}.joe_photos__filter ul li:hover:after{width:100%;transform:scale(1)}.joe_photos__filter ul li a{display:block;color:var(--main);font-size:14px}.joe_photos__filter ul li.active{font-weight:bold}.joe_photos__filter ul li.active:after{width:100%;transform:scale(1)}.joe_photos__layout-switch{position:absolute;top:20px;right:20px}.joe_photos__layout-switch i{float:left;margin-left:5px;color:var(--classA);font-size:18px;cursor:pointer;transition:color .2s}.joe_photos__layout-switch i:hover,.joe_photos__layout-switch i.active{color:var(--theme)}.joe_photos__pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_photos__pagination-item{height:32px;margin-left:5px;padding:0 15px;color:var(--main);line-height:32px;background:var(--background);border-radius:2px;cursor:pointer;transition:background .35s,color .35s;user-select:none}.joe_photos__pagination-item:first-child{margin-left:0}.joe_photos__pagination-item svg{transition:fill .35s;fill:var(--routine)}.joe_photos__pagination-item .next{transform:rotate(180deg)}.joe_photos__pagination-item.active,.joe_photos__pagination-item:hover{color:#fff;background:var(--theme)}.joe_photos__pagination-item.active svg,.joe_photos__pagination-item:hover svg{fill:#fff}:root{--main-bg-color:#ff7675}*,*::after,*::before{box-sizing:border-box}html{background:#f4f4f4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;color:#111}a{text-decoration:none;color:#111;cursor:pointer}ol,ul{list-style:none;margin:0;padding:0}img{max-width:100%}b,strong{font-weight:600}hr{background:#111;box-shadow:none;border:none;height:1px;width:100%;margin:10px 0}::selection{background:var(--main-bg-color);color:#fff}::-moz-selection{background:var(--main-bg-color);color:#fff}.container{width:100%;max-width:980px;margin:0 auto;padding:0 10px}.wrapper{padding:40px 0}.card{background:#fff;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.1);display:flex;flex-direction:column;transition:box-shadow .2s ease-in-out}.card__picture{display:block;width:100%;height:auto;border-top-left-radius:6px;border-top-right-radius:6px}.card-infos{padding:20px;background:#fff;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.card__title{font-size:1.8rem;font-weight:600;line-height:1.4;margin:0 0 10px}.card__text{font-size:1.4rem;font-weight:300;margin:0;color:#86888A}.card__text--high{font-weight:600}.header{background:var(--main-bg-color);height:160px;display:flex}.header__title{margin:auto;font-weight:300;font-size:3.2rem;color:#fff}.header__title--high{font-weight:600}.sortable__nav{display:flex;justify-content:center;margin-bottom:20px}.sortable__nav .nav__link{padding:0 20px 4px;color:#fff;font-size:1.4rem;font-weight:300;display:block;border-bottom:2px solid transparent}.sortable__nav .nav__link.is-active{border-color:var(--main-bg-color)}.footer__list.list{display:flex;justify-content:space-between;align-items:center}.footer__list.list .list__item.item{display:flex}.footer__list.list .list__item.item .item__link.link{margin:0}.footer__list.list .list__item.item .item__link.link:not(:first-child){margin-left:20px}.footer__list.list .list__item.item .item__link.link .link__icon{height:2rem;width:2rem} \ No newline at end of file +.joe_photos__type{position:relative;margin-bottom:15px;padding:60px 15px 15px;background:var(--background);border-radius:var(--radius-wrap);box-shadow:var(--box-shadow)}.joe_photos__type-title{position:absolute;top:15px;left:-10px;height:30px;padding:0 12px;color:#fff;font-weight:500;line-height:30px;background:var(--theme);border-radius:2px 2px 2px 0;box-shadow:2px 5px 10px rgba(49,58,70,0.15);user-select:none}.joe_photos__type-title::before{position:absolute;bottom:-10px;left:-10px;border-color:var(--theme) transparent transparent;border-style:solid;border-width:10px;transform:rotate(90deg);content:""}.joe_photos__type-title .joe-font{vertical-align:bottom}.joe_photos__type-list{display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));gap:10px;padding-top:15px;border-top:1px solid var(--classC)}.joe_photos__type-list .item{height:28px;padding:0 15px;overflow:hidden;color:var(--routine);font-size:12px;line-height:28px;white-space:nowrap;text-align:center;text-overflow:ellipsis;background:var(--classD);border-radius:14px;cursor:pointer;transition:color .35s,background .35s,box-shadow .35s,transform .35s;user-select:none}.joe_photos__type-list .item.active{color:#fff;background:var(--theme);box-shadow:0 5px 5px rgba(0,0,0,0.1);transform:translateY(-2px)}.joe_photos__type-list .item:hover{box-shadow:0 5px 5px rgba(0,0,0,0.1);transform:translateY(-2px)}.joe_photos__type-list .error{color:var(--routine);text-align:center;user-select:none}.joe_photos__gallery{position:relative;width:100% !important;margin:0 auto}.joe_photos__gallery .item{display:block;min-height:50px;overflow:hidden;background:var(--background);border-radius:var(--radius-wrap)}.joe_photos__gallery .item img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease !important}.joe_photos__gallery .item .tit{position:absolute;bottom:0;left:0;z-index:1;width:100%;padding:6px 10px;overflow:hidden;color:#fff;font-size:14px;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(0deg, #151515, transparent 80%)}.joe_photos__gallery .item .team{position:absolute;top:6px;right:6px;z-index:1;padding:2px 4px;overflow:hidden;color:#fff;font-size:13px;white-space:nowrap;text-overflow:ellipsis;background:#5299a5;border-radius:2px}.joe_photos__gallery .item .info{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;padding:20px;color:#fff;opacity:0;transition:opacity .35s}.joe_photos__gallery .item .info p{display:none;margin-bottom:5px;animation-duration:.3s}.joe_photos__gallery .item .info p:nth-child(2){animation-delay:.2s}.joe_photos__gallery .item .info p:nth-child(3){animation-delay:.3s}.joe_photos__gallery .item .info p i{position:relative;top:2px;float:left;margin-right:5px}.joe_photos__gallery .item .info p .joe-icon-shijian{top:0}.joe_photos__gallery .item .info p span{display:block;overflow:hidden}.joe_photos__gallery .item::before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:rgba(0,0,0,0);transition:background .35s;content:""}.joe_photos__gallery .item:hover img{transform:scale(1.2)}.joe_photos__gallery .item:hover::before{background:rgba(0,0,0,0.5);backdrop-filter:blur(1px)}.joe_photos__gallery .item:hover .info{opacity:1}.joe_photos__gallery .item:hover .info p{display:block}.joe_photos__gallery .masonry-item{width:30%}.joe_photos__list{display:grid;grid-template-columns:repeat(4, 1fr);gap:10px}.joe_photos__list .item{position:relative;display:block;overflow:hidden;background:var(--background);border-radius:var(--radius-wrap)}.joe_photos__list .item img{width:100%;height:100%;min-height:50px;object-fit:cover;transition:transform 1s}.joe_photos__list .item .tit{position:absolute;bottom:0;left:0;z-index:1;width:100%;padding:6px 10px;overflow:hidden;color:#fff;font-size:14px;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(0deg, #151515, transparent 80%)}.joe_photos__list .item .team{position:absolute;top:6px;right:6px;z-index:1;padding:2px 4px;overflow:hidden;color:#fff;font-size:13px;white-space:nowrap;text-overflow:ellipsis;background:#5299a5;border-radius:2px}.joe_photos__list .item .info{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;padding:20px;color:#fff;opacity:0;transition:opacity .35s}.joe_photos__list .item .info p{display:none;margin-bottom:5px;animation-duration:.3s}.joe_photos__list .item .info p:nth-child(2){animation-delay:.2s}.joe_photos__list .item .info p:nth-child(3){animation-delay:.3s}.joe_photos__list .item .info p i{position:relative;top:2px;float:left;margin-right:5px}.joe_photos__list .item .info p .joe-icon-shijian{top:0}.joe_photos__list .item .info p span{display:block;overflow:hidden}.joe_photos__list .item::before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:rgba(0,0,0,0);transition:background .35s;content:""}.joe_photos__list .item::after{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDQ1IDQ1IiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj48Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSI2IiBzdHJva2Utb3BhY2l0eT0iMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMTswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMjswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjYiIHN0cm9rZS1vcGFjaXR5PSIwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iM3MiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjNzIiBkdXI9IjNzIiB2YWx1ZXM9IjE7MCIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGJlZ2luPSIzcyIgZHVyPSIzcyIgdmFsdWVzPSIyOzAiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iOCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjBzIiBkdXI9IjEuNXMiIHZhbHVlcz0iNjsxOzI7Mzs0OzU7NiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PC9zdmc+);background-repeat:no-repeat;background-position:right bottom;background-size:20% auto;transform:scale(2);opacity:0;transition:transform .35s,opacity .35s;content:""}.joe_photos__list .item:hover img{transform:scale(1.2)}.joe_photos__list .item:hover::before{background:rgba(0,0,0,0.5);backdrop-filter:blur(1px)}.joe_photos__list .item:hover::after{transform:scale(1);opacity:1}.joe_photos__list .item:hover .info{opacity:1}.joe_photos__list .item:hover .info p{display:block}.joe_photos__list:empty{position:relative;display:flex;align-items:center;justify-content:center;height:180px}.joe_photos__list:empty::after{display:block;width:70px;height:70px;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA1NyA1NyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiM0MDllZmYiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNTAiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICB2YWx1ZXM9IjUwOzU7NTA7NTAiDQogICAgICAgICAgICAgICAgICAgICBjYWxjTW9kZT0ibGluZWFyIg0KICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+DQogICAgICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giDQogICAgICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iMi4ycyINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTsyNzs0OTs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSIyNyIgY3k9IjUiIHI9IjUiPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN5Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSI1IiB0bz0iNSINCiAgICAgICAgICAgICAgICAgICAgIHZhbHVlcz0iNTs1MDs1MDs1Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgYmVnaW49IjBzIiBkdXI9IjIuMnMiDQogICAgICAgICAgICAgICAgICAgICBmcm9tPSIyNyIgdG89IjI3Ig0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIyNzs0OTs1OzI3Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgICAgICA8Y2lyY2xlIGN4PSI0OSIgY3k9IjUwIiByPSI1Ij4NCiAgICAgICAgICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJjeSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI1MDs1MDs1OzUwIg0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4Ig0KICAgICAgICAgICAgICAgICAgICAgZnJvbT0iNDkiIHRvPSI0OSINCiAgICAgICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIyLjJzIg0KICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSI0OTs1OzI3OzQ5Ig0KICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciINCiAgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPg0KICAgICAgICAgICAgPC9jaXJjbGU+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=);background-repeat:no-repeat;background-size:100% 100%;content:""}.joe_photos__list.waterfall{position:relative}.joe_photos__list.waterfall .item img{height:auto}.joe_photos__filter{position:relative;top:12px;display:block}.joe_photos__filter ul{margin:0 0 20px 0;padding:0;font-size:14px;letter-spacing:.05em;list-style:none;user-select:none}.joe_photos__filter ul li{position:relative;display:inline-block;margin:0 20px 12px 0;vertical-align:bottom;font-size:0}.joe_photos__filter ul li:after{position:absolute;right:0;bottom:-4px;left:0;width:0;height:3px;background:var(--theme);border-radius:3px;transform:scale(0, 1);transform-origin:50% 0;transition:transform .35s;content:"";will-change:transform}.joe_photos__filter ul li:hover:after{width:100%;transform:scale(1)}.joe_photos__filter ul li a{display:block;color:var(--main);font-size:14px}.joe_photos__filter ul li.active{font-weight:bold}.joe_photos__filter ul li.active:after{width:100%;transform:scale(1)}.joe_photos__layout-switch{position:absolute;top:20px;right:20px}.joe_photos__layout-switch i{float:left;margin-left:5px;color:var(--classA);font-size:18px;cursor:pointer;transition:color .2s}.joe_photos__layout-switch i:hover,.joe_photos__layout-switch i.active{color:var(--theme)}.joe_photos__pagination{display:flex;align-items:center;justify-content:flex-end;padding-top:15px}.joe_photos__pagination-item{height:32px;margin-left:5px;padding:0 15px;color:var(--main);line-height:32px;background:var(--background);border-radius:2px;cursor:pointer;transition:background .35s,color .35s;user-select:none}.joe_photos__pagination-item:first-child{margin-left:0}.joe_photos__pagination-item svg{transition:fill .35s;fill:var(--routine)}.joe_photos__pagination-item .next{transform:rotate(180deg)}.joe_photos__pagination-item.active,.joe_photos__pagination-item:hover{color:#fff;background:var(--theme)}.joe_photos__pagination-item.active svg,.joe_photos__pagination-item:hover svg{fill:#fff}:root{--main-bg-color:#ff7675}*,*::after,*::before{box-sizing:border-box}html{background:#f4f4f4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;color:#111}a{text-decoration:none;color:#111;cursor:pointer}ol,ul{list-style:none;margin:0;padding:0}img{max-width:100%}b,strong{font-weight:600}hr{background:#111;box-shadow:none;border:none;height:1px;width:100%;margin:10px 0}::selection{background:var(--main-bg-color);color:#fff}::-moz-selection{background:var(--main-bg-color);color:#fff}.container{width:100%;max-width:980px;margin:0 auto;padding:0 10px}.wrapper{padding:40px 0}.card{background:#fff;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.1);display:flex;flex-direction:column;transition:box-shadow .2s ease-in-out}.card__picture{display:block;width:100%;height:auto;border-top-left-radius:6px;border-top-right-radius:6px}.card-infos{padding:20px;background:#fff;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.card__title{font-size:1.8rem;font-weight:600;line-height:1.4;margin:0 0 10px}.card__text{font-size:1.4rem;font-weight:300;margin:0;color:#86888A}.card__text--high{font-weight:600}.header{background:var(--main-bg-color);height:160px;display:flex}.header__title{margin:auto;font-weight:300;font-size:3.2rem;color:#fff}.header__title--high{font-weight:600}.sortable__nav{display:flex;justify-content:center;margin-bottom:20px}.sortable__nav .nav__link{padding:0 20px 4px;color:#fff;font-size:1.4rem;font-weight:300;display:block;border-bottom:2px solid transparent}.sortable__nav .nav__link.is-active{border-color:var(--main-bg-color)}.footer__list.list{display:flex;justify-content:space-between;align-items:center}.footer__list.list .list__item.item{display:flex}.footer__list.list .list__item.item .item__link.link{margin:0}.footer__list.list .list__item.item .item__link.link:not(:first-child){margin-left:20px}.footer__list.list .list__item.item .item__link.link .link__icon{height:2rem;width:2rem}.grid{position:relative;margin:0 auto;max-width:1200px}.grid .grid-item{margin-bottom:15px;box-sizing:border-box;padding:5px;height:auto}.grid .grid-item img{width:100%;height:auto;display:block;object-fit:cover;border-radius:var(--radius-wrap)}@media (min-width:1200px){.grid .grid-item{width:calc(25%)}}@media (min-width:768px) and (max-width:1199px){.grid .grid-item{width:calc(33.333%)}}@media (max-width:767px){.grid .grid-item{width:calc(50%)}} \ No newline at end of file diff --git a/templates/assets/css/photos.less b/templates/assets/css/photos.less index 0ef27c4..206a895 100644 --- a/templates/assets/css/photos.less +++ b/templates/assets/css/photos.less @@ -609,6 +609,7 @@ hr { .wrapper { padding: 40px 0; + } .card { @@ -711,5 +712,38 @@ hr { } } } +.grid { + position: relative; + margin: 0 auto; + max-width: 1200px; + + .grid-item { + margin-bottom: 15px; + box-sizing: border-box; + padding: 5px; + height: auto; /* 预设高度可以改善布局的稳定性 */ + + img { + width: 100%; + height: auto; /* 保持图片宽高比 */ + display: block; + object-fit: cover; /* 防止图片变形 */ + border-radius: var(--radius-wrap); + } + } + + /* 电脑大屏幕，一行4张 */ + @media (min-width: 1200px) { + .grid-item { width: calc(25%); } + } + + @media (min-width: 768px) and (max-width: 1199px) { + .grid-item { width: calc(33.333%); } + } + + @media (max-width: 767px) { + .grid-item { width: calc(50%); } + } +} diff --git a/templates/assets/js/min/photos.min.js b/templates/assets/js/min/photos.min.js index 0a607f8..7f54e5d 100644 --- a/templates/assets/js/min/photos.min.js +++ b/templates/assets/js/min/photos.min.js @@ -1 +1 @@ -class Sortable{constructor({parent:t,links:e=document.querySelectorAll("[data-sjslink]"),active:s="active",margin:i=20,responsive:r={980:{columns:3},480:{columns:2},0:{columns:1}},fadeDuration:n={in:300,out:0}}={}){this.parent=t,this.links=Array.from(e),this.active=s,this.margin=i,this.responsive=r,this.fadeDuration=n,this.elements=Array.from(this.parent.children),this.activeElements=this.elements,this.columns=1,this.dataLink="all",this.winWidth=window.innerWidth,this.init()}orderelements(){let{parent:t,activeElements:e,columns:n,blocWidth:a,margin:l}=this;var s=e.reduce((t,e,s)=>{var i=this._sumArrHeight(t,n),r=s%n*(a+l),i=0<=s-n?i[s%n]+l*Math.floor(s/n):0;return e.style.transform=`translate3d(${r}px, ${i}px, 0)`,t.push(e.offsetHeight),t},[]),s=this._sumArrHeight(s,n),s=Math.max(...s)+l*(Math.floor(e.length/n)-1);t.style.height=s+"px"}handleFilterClick(t,e){t.preventDefault();let{links:s,active:i}=this;e.dataset.sjslink!==this.dataLink&&(this.dataLink=e.dataset.sjslink,s.forEach(t=>{t.isEqualNode(e)?t.classList.add(i):t.classList.remove(i)}),this._filterElements(()=>{this.orderelements()}))}resize(){window.addEventListener("resize",()=>{clearTimeout(window.sortableResize),window.sortableResize=setTimeout(()=>{this.winWidth=window.innerWidth,this._setBlocWidth(()=>{this.orderelements()})},500)})}init(){let{parent:t,links:e,active:s}=this;e.forEach((e,t)=>{0===t&&(e.classList.add(s),this.dataLink=e.dataset.sjslink),e.addEventListener("click",t=>{this.handleFilterClick(t,e)})}),this._setBlocWidth(),window.addEventListener("load",()=>{this._filterElements(()=>{this.orderelements()}),t.style.opacity=1}),this.resize();const i=new IntersectionObserver(t=>{t.forEach(t=>{var e;t.isIntersecting&&(e=(t=t.target).getAttribute("data-src"),t.setAttribute("src",e),i.unobserve(t))})},{threshold:.5});document.querySelectorAll("img.card__picture").forEach(t=>{i.observe(t)})}_setBlocWidth(t){var{parent:e,elements:s,margin:i,responsive:r}=this,r=this.columns=this._columnsCount(r).columns;let n=this.blocWidth=(e.clientWidth-i*(r-1))/r;s.forEach(t=>{t.style.width=n+"px"}),t&&t()}_filterElements(t){let{elements:e,dataLink:s,fadeDuration:i}=this;this.activeElements=e.filter(t=>"all"!==s&&t.dataset.sjsel!==s?(this._fadeOut(t,i.out),!1):(this._fadeIn(t,i.in),this._lazyLoadImages(t),!0)),t&&t()}_lazyLoadImages(t){t=t.querySelectorAll('img[loading="lazy"]');const e=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting&&((t=t.target).src=t.dataset.src,t.removeAttribute("loading"),e.unobserve(t),t.onload=()=>{this.orderelements()})})});t.forEach(t=>{e.observe(t)})}_sumArrHeight(t,i){return t.reduce((t,e,s)=>{s%=i;return t[s]||(t[s]=0),t[s]=t[s]+e,t},[])}_columnsCount(t){let s=this["winWidth"];return Object.entries(t).reduce((t,e)=>s>e[0]&&e[0]>=Math.max(t.width)?{width:e[0],columns:e[1].columns}:t,{width:0,columns:4})}_fadeIn(e,t=300,s){let i=parseFloat(window.getComputedStyle(e,null).getPropertyValue("opacity")),r=16/t;e.style.display="block",requestAnimationFrame(function t(){(i+=r)<=1?(e.style.opacity=i,requestAnimationFrame(t)):(e.style.opacity=1,s&&s())})}_fadeOut(e,t=300,s){let i=parseFloat(window.getComputedStyle(e,null).getPropertyValue("opacity")),r=t?16/t:1;requestAnimationFrame(function t(){0<=(i-=r)?(e.style.opacity=i,requestAnimationFrame(t)):(e.style.opacity=0,e.style.display="none",s&&s())})}}HTMLElement.prototype.sortablejs=HTMLElement.prototype.sortablejs||function(t){return new Sortable({parent:this,...t})}; \ No newline at end of file +$(document).ready(function(){const s=$("#image-grid").isotope({itemSelector:".grid-item",percentPosition:!0,masonry:{columnWidth:".grid-item"}});let n=[],a=0;const r=ThemeConfig.blog_url;function t(){const i=$(".joe_loading");var t,e;t=function(){for(var e=a+6,t=[];a
'+o.spec.displayName+'
');t.push(o[0])}s.append(t).isotope("appended",t).imagesLoaded().progress(function(){s.isotope("layout")}),a>=n.length&&(i.remove(),l.unobserve(c))},n.length?t():(e=r+"/apis/api.plugin.halo.run/v1alpha1/plugins/PluginPhotos/photos",$.getJSON(e,function(e){n=e.items,t()}))}t();const l=new IntersectionObserver(e=>{e[0].isIntersecting&&t()},{threshold:1}),c=document.querySelector(".joe_loading");l.observe(c),$(".joe_photos__filter li").on("click",function(){let t=$(this).attr("data-sjslink");console.log(t),$(this).addClass("active").siblings().removeClass("active"),s.isotope({filter:function(){var e=$(this).attr("data-sjsel");return console.log("Filtering:",e,t),"*"===t||e===t}})})}); \ No newline at end of file diff --git a/templates/assets/js/photos.js b/templates/assets/js/photos.js index c857019..53f58c9 100644 --- a/templates/assets/js/photos.js +++ b/templates/assets/js/photos.js @@ -1,258 +1,102 @@ -class Sortable { - constructor({ - parent, - links = document.querySelectorAll('[data-sjslink]'), - active = 'active', - margin = 20, - responsive = { - 980: { - columns: 3 - }, - 480: { - columns: 2 - }, - 0: { - columns: 1 - } - }, - fadeDuration = { - in: 300, - out: 0 - } - } = {}) { - this.parent = parent - this.links = Array.from(links) - this.active = active - this.margin = margin - this.responsive = responsive - this.fadeDuration = fadeDuration - this.elements = Array.from(this.parent.children) - this.activeElements = this.elements - this.columns = 1 - this.dataLink = 'all' - this.winWidth = window.innerWidth - this.init() - } - - orderelements(){ - let {parent, activeElements, columns, blocWidth, responsive, margin} = this - - let arrayRectHeight = activeElements.reduce((acc, el, id) => { - let columnsHeight = this._sumArrHeight(acc, columns) - let positionX = (id%columns) * (blocWidth + margin) - let rectHeight = (id - columns >= 0) ? (columnsHeight[id%columns] + (margin * Math.floor(id / columns))) : 0 - - el.style.transform = `translate3d(${positionX}px, ${rectHeight}px, 0)` - - acc.push(el.offsetHeight) - return acc - }, []) - - let columnsMaxHeight = this._sumArrHeight(arrayRectHeight, columns) - let parentHeight = Math.max(...columnsMaxHeight) + (margin * (Math.floor(activeElements.length / columns) - 1)) - parent.style.height = `${parentHeight}px` - } - - handleFilterClick(ev, element){ - ev.preventDefault() - let {links, active} = this - - if(element.dataset.sjslink === this.dataLink){ - return - } else { - this.dataLink = element.dataset.sjslink - links.forEach(el => { - el.isEqualNode(element) ? el.classList.add(active) : el.classList.remove(active) - }) - this._filterElements(()=>{ - this.orderelements() - }) +$(document).ready(function(){ + const $grid = $('#image-grid').isotope({ + itemSelector: '.grid-item', + percentPosition: true, + masonry: { + columnWidth: '.grid-item' } - } + }); - resize(){ - window.addEventListener('resize', () => { - clearTimeout(window.sortableResize) - window.sortableResize = setTimeout(() => { - this.winWidth = window.innerWidth - this._setBlocWidth(()=>{ - this.orderelements() - }) - }, 500) - }) - } - init(){ - let {parent, links, active} = this + let allImages = []; + let currentIndex = 0; + const batchSize = 6; + const baseUrl = ThemeConfig.blog_url; // 替换成您的API URL - links.forEach((el, id) => { - if(id === 0){ - el.classList.add(active) - this.dataLink = el.dataset.sjslink - } - el.addEventListener('click', ev => { - this.handleFilterClick(ev, el) - }) - }) - - this._setBlocWidth() - - window.addEventListener('load', () => { - this._filterElements(()=>{ - this.orderelements() - }) - parent.style.opacity = 1 - }) - - this.resize() - //使用Intersection Observer API实现懒加载 - const ob = new IntersectionObserver( - (entries)=>{ - entries.forEach((entry)=>{ - if(entry.isIntersecting){ - const img = entry.target; - const src = img.getAttribute('data-src'); - img.setAttribute('src',src); - ob.unobserve(img); - } - }) - },{ - threshold:0.5 - }); - const imgs = document.querySelectorAll('img.card__picture'); - imgs.forEach((img)=>{ - ob.observe(img); - }) - - } - - _setBlocWidth(callback){ - let {parent, elements, margin, responsive} = this - - let columns = this.columns = this._columnsCount(responsive)['columns'] - let blocWidth = this.blocWidth = (parent.clientWidth - (margin * (columns - 1))) / columns - - elements.forEach(el=>{ - el.style.width = `${blocWidth}px` - }) - if(callback){ - callback() + function loadImages(callback) { + // ...逻辑保持不变 + if (allImages.length) { + callback(); + return; } - } - _filterElements(callback){ - let {elements, dataLink, fadeDuration} = this - this.activeElements = elements.filter(el => { - if(dataLink === 'all') { - this._fadeIn(el, fadeDuration.in) - this._lazyLoadImages(el); - return true - } else { - if(el.dataset.sjsel !== dataLink) { - this._fadeOut(el, fadeDuration.out) - return false - } else { - this._fadeIn(el, fadeDuration.in) - this._lazyLoadImages(el); // 添加这一行来启动懒加载 - return true - } - } - }) - - if(callback){ - callback() - } - } - // 添加一个新的方法来执行图片的懒加载，使用 IntersectionObserver - _lazyLoadImages(el) { - const images = el.querySelectorAll('img[loading="lazy"]'); - - const observer = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (entry.isIntersecting) { - const img = entry.target; - img.src = img.dataset.src; - img.removeAttribute('loading'); - observer.unobserve(img); - - // 在图片加载完成后触发重新布局 - img.onload = () => { - this.orderelements(); // 调用重新布局方法 - }; - } - }); - }); - - images.forEach(img => { - observer.observe(img); + // 获取所有图片 + const apiUrl = baseUrl + '/apis/api.plugin.halo.run/v1alpha1/plugins/PluginPhotos/photos'; + $.getJSON(apiUrl, function(data) { + allImages = data.items; // 假设这是图片数组 + callback(); }); } - _sumArrHeight(arr, col){ - return arr.reduce((acc, val, id)=>{ - let cle = id%col - if(!acc[cle]){ - acc[cle] = 0 + + function loadBatchImages() { + + const $domLoad = $('.joe_loading') + loadImages(function() { + // ...创建和插入元素的逻辑保持不变 + const batchEndIndex = currentIndex + batchSize; + // 一批加载的图片项 + const items = []; + + // 获取当前批次的图片 + for (; currentIndex < batchEndIndex && currentIndex < allImages.length; currentIndex++) { + const currentImage = allImages[currentIndex]; + const item = $('
' + + '
'+ + ''+ + '' + currentImage.spec.displayName + '' + + ''+ + '
'+ + '
'); + + items.push(item[0]); } - acc[cle] = acc[cle]+val - return acc - }, []) - } - _columnsCount(obj){ - let {winWidth} = this - return Object.entries(obj).reduce((acc, val)=>{ - return winWidth > val[0] && val[0] >= Math.max(acc['width']) - ? { width: val[0], columns: val[1]['columns'] } - : acc - }, {width: 0, columns: 4}) - } - _fadeIn(el, duration = 300, callback){ - let opacity = parseFloat(window.getComputedStyle(el, null).getPropertyValue("opacity")), - interval = 16, - gap = interval / duration - el.style.display = 'block' - - function animation(){ - opacity += gap - - if(opacity <= 1){ - el.style.opacity = opacity - requestAnimationFrame(animation) - } else { - el.style.opacity = 1 - if(callback){ - callback() - } + // 将图片元素添加到网格中并重新布局 + $grid.append(items) + .isotope('appended', items) + .imagesLoaded().progress(function() { + $grid.isotope('layout'); + }); + // ...其余逻辑保持不变 + // 如果所有图片都已加载，可以选择隐藏加载更多按钮 + if (currentIndex >= allImages.length) { + $domLoad.remove() + ob.unobserve(loading) } + }); + } + + // 初始加载 + loadBatchImages(); + const ob = new IntersectionObserver(entries => { + if (entries[0].isIntersecting){ + loadBatchImages(); } - requestAnimationFrame(animation) - } - _fadeOut(el, duration = 300, callback){ - let opacity = parseFloat(window.getComputedStyle(el, null).getPropertyValue("opacity")), - interval = 16, - gap = duration ? (interval / duration) : 1 - function animation(){ - opacity -= gap + }, { + threshold:1 + }) + const loading = document.querySelector('.joe_loading') + ob.observe(loading) - if(opacity >= 0){ - el.style.opacity = opacity - requestAnimationFrame(animation) - } else { - el.style.opacity = 0 - el.style.display = 'none' - if(callback){ - callback() - } + + $('.joe_photos__filter li').on('click', function(){ + let filterValue = $(this).attr('data-sjslink'); + console.log(filterValue) + // 添加active + $(this).addClass('active').siblings().removeClass('active'); + $grid.isotope({ + filter: function() { + // 这里 "this" 指的是每一个被 Isotope 处理的元素 + // 检查 data-sjsel 属性值是否匹配我们筛选的值 + const sjselValue = $(this).attr('data-sjsel'); // 这里获取的是.grid-item的data-sjsel + console.log('Filtering:', sjselValue, filterValue); + // 如果 filterValue 是 '*'（显示所有），或者 sjselValue 匹配筛选值，则保留元素 + return filterValue === '*' || sjselValue === filterValue; } - } - requestAnimationFrame(animation) - } -} - -HTMLElement.prototype.sortablejs = HTMLElement.prototype.sortablejs || function(params){ - return new Sortable({parent: this, ...params}) -} \ No newline at end of file + }); + }); +}); \ No newline at end of file diff --git a/templates/photos.html b/templates/photos.html index 79cc4e2..073db9e 100644 --- a/templates/photos.html +++ b/templates/photos.html @@ -15,7 +15,7 @@