效果图：
第一步：
将 wallpaperApi.php 放到网站根目录
第二步：
新建一个页面，内容选择一个自定义 html
粘贴以下代码:
<style>
.article{
padding: 0 10px
}
.j-post .wallpaper-api .wallpaper-type {
position: relative;
margin-bottom: 20px
}
.j-post .wallpaper-api .wallpaper-type .list {
padding: 15px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 15px;
margin: 0;
}
.j-post .wallpaper-api .wallpaper-type .list li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #f2f6fc;
line-height: 28px;
text-align: center;
border-radius: 4px;
padding: 4px 15px;
margin: 0;
cursor: pointer;
font-size: 13px;
opacity: .82;
transition: all .3s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.j-post .wallpaper-api .wallpaper-type .list li:hover {
background-color: #e9edf5;
opacity: 1;
}
.j-post .wallpaper-api .wallpaper-type .list li.active {
color: var(--main-bg-color);
background: var(--theme-color);
box-shadow: 0 5px 5px rgba(0,0,0,0.1)
}
.j-post .wallpaper-api .wallpaper-list {
padding: 15px 0;
background: var(--main-bg-color);
border-radius: var(--main-radius);
box-shadow: var(--main-shadow)
}
.j-post .wallpaper-api .wallpaper-list .list {
display: flex;
flex-wrap: wrap
}
.j-post .wallpaper-api .wallpaper-list .list .item {
position: relative;
width: 25%;
border: 1px solid var(--main-bg-color);
display: block;
}
.j-post .wallpaper-api .wallpaper-list .list .item:after {
display: none;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.4);
z-index: 1;
}
.j-post .wallpaper-api .wallpaper-list .list .item:before {
display: none;
content: "f019";
position: absolute;
font-family: "FontAwesome";
left: 50%;
top: 50%;
font-size: 1.6em;
color: #fff;
transform: translate(-50%,-50%);
z-index: 2;
}
.j-post .wallpaper-api .wallpaper-list .list .item:hover:before,.j-post .wallpaper-api .wallpaper-list .list .item:hover:after{
display: block;
}
.j-post .wallpaper-api .wallpaper-list .list .item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.j-post .wallpaper-api .wallpaper-list .list .item .down {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50%;
background: rgba(0,0,0,0.5)
}
.j-post .wallpaper-api .wallpaper-list .list .item .down a {
display: block
}
.j-post .wallpaper-api .wallpaper-list .wallpaper-load {
margin: 20px auto;
width: 120px;
height: 34px;
line-height: 34px;
background: var(--theme-color);
color: #fff;
text-align: center;
font-size: 15px;
border-radius: 17px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.j-post .wallpaper-api .load {
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0
}
@media screen and (max-width: 768px){
.j-post .wallpaper-api .wallpaper-list .list .item {
width: calc(50% - 4px);
}
.box-body{
padding: 15px 0;
}
.j-post .wallpaper-api .wallpaper-type{
margin-bottom: 0;
}
}
</style>
<section class="j-post">
<section class="j-adaption">
<div class="wallpaper-api">
<div class="wallpaper-type">
<ul class="list" id="wallpaper-type"></ul>
<div class="load j-wallpaper-load-1" style="display: none;">
<svg version="1.1" id="Layer_1" xmlns_xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml_space="preserve">
<rect x="0" y="10" width="4" height="10" fill="var(--theme)" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="var(--theme)" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="var(--theme)" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</div>
</div>
<div class="wallpaper-list">
<div class="list" id="wallpaper-list"></div>
<div class="load j-wallpaper-load-2" style="display: none;">
<svg version="1.1" id="Layer_1" xmlns_xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml_space="preserve">
<rect x="0" y="10" width="4" height="10" fill="var(--theme)" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="var(--theme)" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="var(--theme)" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</div>
<div id="wallpaper-load" class="wallpaper-load"> 加载更多</div>
</div>
</div>
</section>
</section>
<script>
//移植于 Joe 主题
(() => {
class Joe {
constructor() {
this.wallpaper_page = 0;
this.wallpaper_cid = '';
this.init();
}
init() {
/* 解决移动端 hover 问题*/
$(document).on('touchstart', e => {});
/* 初始化壁纸页 */
this.init_wallpaper();
}
/* 初始化壁纸分类 */
init_wallpaper() {
if ($('#wallpaper-type').length === 0) return;
$.ajax({
url: '/wallpaperApi.php?cid=360tags',
method: 'get',
dataType: 'json',
success: res => {
if (res.errno !== '0')
return $.toast({
type: 'warning',
message: '接口异常，请联系开发者！'
});
$('.j-wallpaper-load-1').hide();
let str = '<li data-cid="360new" class="active"> 最新壁纸</li>';
res.data.forEach(_ => {
str += `<li data-cid="${_.id}">${_.name}</li>`;
});
$('#wallpaper-type').html(str);
$('#wallpaper-type li').first().click();
}
});
let _this = this;
$(document).on('click', '#wallpaper-type li', function () {
$(this).addClass('active').siblings().removeClass('active');
_this.wallpaper_page = 0;
_this.wallpaper_cid = $(this).attr('data-cid');
$('#wallpaper-list').html('');
_this.init_wallpaper_list();
});
$('#wallpaper-load').on('click', function () {
_this.wallpaper_page += 1;
_this.init_wallpaper_list();
});
}
init_wallpaper_list() {
let _this = this;
$('.j-wallpaper-load-2').show();
$.ajax({
url: '/wallpaperApi.php',
data: {
cid: _this.wallpaper_cid,
start: _this.wallpaper_page * 20,
count: 20
},
method: 'get',
dataType: 'json',
success: res => {
$('.j-wallpaper-load-2').hide();
if (res.total != 0) {
res.data.forEach(_ => {
$('#wallpaper-list').append(`
<a class="item" href="${_.url}" target="_blank">
<img loading="lazy" src="${_.img_1024_768}" data-src="${_.img_1024_768}" />
</a>
`);
});
} else {
$('#wallpaper-load').remove();
}
}
});
}
}
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
module.exports = Joe;
} else {
window.Joe = Joe;
}
})();
new Joe({});
</script>说明：
该功能移植与 Joe 主题，使用 360 壁纸 api 作为壁纸源
