SokWith
commented
6 months ago 有分页功能吗？图片多了打开太慢了。
Open panther125 opened 6 months ago
SokWith
commented
6 months ago 有分页功能吗？图片多了打开太慢了。
panther125
commented
3 months ago 有分页功能吗？图片多了打开太慢了。
可以在list接口改一下
const value = await env.img_url.list();
const url = new URL(request.url);
const start = parseInt(url.searchParams.get("start")) || 0;
const count = parseInt(url.searchParams.get("count")) || 10;
const offset = start * count;
const paginatedKeys = value.keys.slice(offset, offset + count);
const res = paginatedKeys.map(key => ({
name: key.name,
TimeStamp: key.metadata?.TimeStamp,
ListType: key.metadata?.ListType,
rating_label: key.metadata?.rating_label,
}));
//console.log(res)
const response = {
count: value.keys.length, // Total number of items
datalist: res, // Paginated data list
};
const info = JSON.stringify(response);
return new Response(info);图片预览也加上懒加载可以提高点速度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background: linear-gradient(90deg, #ffd7e4 0%, #c8f1ff 100%);
}
.box {
position: relative;
}
img {
width: 200px;
height: auto;
padding: 5px;
margin-left: 1.25%;
border-radius: 20px;
}
#bigimg {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#bigimg img {
position: absolute;
width: 90%;
height: 100%;
top: 50%;
left: 50%;
object-fit: contain;
transform: translate(-50%, -50%);
}
wc-waterfall > * {
border-radius: 6px;
background-color: #80808020;
font-size: 2em;
text-align: center;
}
wc-waterfall > *:hover {
background-color: #80808040;
}
</style>
</head>
<body>
<wc-waterfall id="fl" cols="5" gap="10">
</wc-waterfall>
<div id="bigimg" onclick="closeBigImg();"></div>
</body>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/onepage-scroll/1.3.1/jquery.onepage-scroll.min.js" type="application/javascript"></script>
<script src="https://wallpaper.gincode.icu/js/index.iife.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var jigsaw = {
count: 0, // 已加载的总数
halfHtml: '',
pageno: 0, // 最后一个加载的html
pageSize: 10,
loadBig: false, // 是否已加载最大的那个
ajaxing: false //是否正在ajax加载
};
//加载图床图片
function ajaxPanWal() {
if (jigsaw.ajaxing === true) return false;
$("#loadmore").html('努力加载中……');
$("#loadmore").show();
jigsaw.ajaxing = true;
if(jigsaw.pageno === 0){
jigsaw.pageSize = 20;
jigsaw.pageno++;
}else{
jigsaw.pageSize = 10
}
var jsonData
$.ajax({
url: "https://image.gincode.icu/api/manage/list",
async: false,
data: "start=" + jigsaw.pageno + "&count=" + jigsaw.pageSize,
dataType: "json",
success: function (data) {
jsonData = data; // 将请求的数据赋值给全局变量
}
});
jigsaw.pageno++;
//console.log(jsonData);
var imgList = jsonData.datalist;
//console.log(imgList);
const fl = document.getElementById("fl")
for (var i = 0; i < imgList.length; i++) {
if (imgList[i].name.indexOf(".mp4") > 0) continue;
const div = document.createElement('div')
div.innerHTML = '<img onclick="showBigImg(this)" data-src="https://image.gincode.icu/file/' + imgList[i].name + '" src="https://image.gincode.icu/file/' + imgList[i].name + '" class="lazyload">'
fl.appendChild(div)
}
resizeHeight();
jigsaw.ajaxing = false;
waterfallHandler();
if (jsonData.datalist.length === 0) {
$("#loadmore").html('所有的壁纸都已经加载完啦！');
} else {
$("#loadmore").hide();
}
return true;
}
$(function () {
// 监听滚动消息
$(window).scroll(function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + $(window).height() + 57 >= $(document).height() && scrollTop > 20) {
ajaxPanWal(); // 初始加载壁纸
resizeHeight();
}
});
});
function showBigImg(img) {
var bigImg = document.getElementById('bigimg');
var imgUrl = img.getAttribute('data-src');
bigImg.innerHTML = '<img src="' + imgUrl + '">';
bigImg.style.display = 'block';
}
function closeBigImg() {
var bigImg = document.getElementById('bigimg');
bigImg.style.display = 'none';
bigImg.innerHTML = '';
}
function waterfallHandler() {
// 获取图片的宽度(200px)
let imgWidth = $('img').outerWidth(); // 200
// 获取图片的列数
let column = parseInt($(window).width() / imgWidth);
const fl = document.getElementById("fl")
fl.setAttribute('cols', column);
}
// 大小改变
window.onresize = function () {
resizeHeight();
};
// 重新调整高度
function resizeHeight() {
var newHeight = $("#walBox").width() * (0.618 / 2);
$(".jigsaw .item").css('height', newHeight);
$(".jigsaw .Hhalf").css('height', newHeight / 2);
return true;
}
// 初始化
window.onload = function () {
ajaxPanWal(); // 初始加载壁纸
resizeHeight();
};
</script>
</html>
本人基于list接口设置了瀑布流图片预览，后续希望作者在这个页面实现管理功能