80 lines
1.9 KiB
Plaintext
80 lines
1.9 KiB
Plaintext
<div class="index-gallery index8">
|
|
<h3 class="index-title">
|
|
<span>{{page-title}}</span>
|
|
</h3>
|
|
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
|
|
<div class="index-content col-sm-4">
|
|
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
|
|
<div class="index-content-inner">
|
|
<div class="index-pic">
|
|
<img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
|
|
</div>
|
|
</a>
|
|
<div class="index-part">
|
|
<h4 class="index-content-title">
|
|
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
|
|
</h4>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{pagination_goes_here}}
|
|
<style>
|
|
.index-gallery.index8 .row {
|
|
@media(min-width:768px){
|
|
display: block !important;
|
|
column-count: 3;
|
|
column-gap: 16px;
|
|
}
|
|
}
|
|
|
|
.index-gallery.index8 .index-content {
|
|
break-inside: avoid;
|
|
-webkit-column-break-inside: avoid;
|
|
display: inline-block;
|
|
width:100%!important;
|
|
margin-bottom: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
.index-gallery.index8 .index-content.col-sm-4 {
|
|
float: none !important;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
.index-gallery.index8 .index-content-inner {
|
|
width: 100%;
|
|
}
|
|
|
|
.index-gallery.index8 .index-content-inner img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('.index-gallery.index8 .index-content').each(function (i) {
|
|
$(this).css({
|
|
'opacity': 0,
|
|
'animation': 'fadeInUp 0.6s ease forwards',
|
|
'animation-delay': (i * 0.08) + 's'
|
|
});
|
|
});
|
|
});
|
|
</script> |