照片墙开发记录更新
This commit is contained in:
@@ -1,8 +1,5 @@
|
||||
.article-inner {
|
||||
border-color: #d1d1d1;
|
||||
p {
|
||||
margin: 0 0 1.75em;
|
||||
}
|
||||
// 目录标题
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-weight: 900;
|
||||
|
||||
@@ -2,54 +2,16 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@-webkit-keyframes cd-bounce-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1.01);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes cd-bounce-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(1.01);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes cd-bounce-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1.01);
|
||||
-moz-transform: scale(1.01);
|
||||
-ms-transform: scale(1.01);
|
||||
-o-transform: scale(1.01);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@@ -77,9 +39,6 @@
|
||||
line-height: 35px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 26px;
|
||||
-webkit-transition: color 0.3s;
|
||||
-moz-transition: color 0.3s;
|
||||
-o-transition: color 0.3s;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
|
||||
@@ -60,7 +60,6 @@
|
||||
}
|
||||
}
|
||||
.article-entry .highlight figcaption {
|
||||
color: highlight-comment;
|
||||
line-height: 1em;
|
||||
margin-bottom: 1em;
|
||||
&::after {
|
||||
@@ -108,7 +107,6 @@
|
||||
}
|
||||
.article-entry .gist .gist-file .gist-meta {
|
||||
background: #272822;
|
||||
color: highlight-comment;
|
||||
font: 0.85em "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
text-shadow: 0 0;
|
||||
padding: 0;
|
||||
@@ -123,7 +121,7 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
pre .comment {
|
||||
color: #368022;
|
||||
color: #6A9955;
|
||||
}
|
||||
pre .keyword,
|
||||
pre .function .keyword,
|
||||
|
||||
@@ -23,7 +23,9 @@ function loadMoreItems(step) {
|
||||
let wrapperWidth = photoWallWrapper.getBoundingClientRect().width
|
||||
// 列宽240px 列间距20px, 计算每列宽度
|
||||
let columnWidth = (wrapperWidth + 20) / Math.floor((wrapperWidth + 20) / (240 + 20)) - 20
|
||||
// 图片的实际显示高度
|
||||
imgHeight = (columnWidth / res.data.files[index].width) * res.data.files[index].height
|
||||
imgHeight = Math.round(imgHeight * 100) / 100 // 四舍五入保留2位小数
|
||||
}
|
||||
imgItems += `<div class="item" ${imgHeight ? 'style="height:' + imgHeight + 'px"' : ''}>
|
||||
<img class="item-img" src="${themeConfig.pictureCdn}/${res.data.files[index].name}" alt=""/>
|
||||
|
||||
Reference in New Issue
Block a user