ZZ\u76f8\u518c\u96c6 – \u7eaf\u5c55\u793a\u7248<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* \u81ea\u5b9a\u4e49\u6eda\u52a8\u6761 *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n ::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #555;\n }\n\n \/* \u7011\u5e03\u6d41\u6838\u5fc3\u6837\u5f0f\uff1a\u4f7f\u7528 CSS Columns \u5b9e\u73b0\u6700\u7b80\u4e14\u9ad8\u6027\u80fd\u7684\u7011\u5e03\u6d41 *\/\n .masonry-grid {\n column-count: 1;\n column-gap: 1.5rem;\n }\n @media (min-width: 640px) {\n .masonry-grid { column-count: 2; }\n }\n @media (min-width: 1024px) {\n .masonry-grid { column-count: 3; }\n }\n @media (min-width: 1280px) {\n .masonry-grid { column-count: 4; }\n }\n\n \/* \u9632\u6b62\u56fe\u7247\u5728\u5217\u4e2d\u65ad\u5f00 *\/\n .masonry-item {\n break-inside: avoid;\n margin-bottom: 1.5rem;\n }\n\n \/* \u56fe\u7247\u52a0\u8f7d\u524d\u7684\u5360\u4f4d\u52a8\u753b *\/\n .image-skeleton {\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: loading 1.5s infinite;\n }\n @keyframes loading {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n\n \/* \u6a21\u6001\u6846\u8fc7\u6e21\u6548\u679c *\/\n .modal-enter {\n opacity: 0;\n transform: scale(0.95);\n }\n .modal-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: opacity 0.3s ease-out, transform 0.3s ease-out;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800 font-sans antialiased min-h-screen flex flex-col\">\n\n \n <header class=\"bg-white\/80 backdrop-blur-md sticky top-0 z-40 border-b border-gray-200 shadow-sm\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-layer-group text-indigo-600 text-2xl\"><\/i>\n <h1 class=\"text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600\">\n ZZ\n <\/h1>\n <\/div>\n \n \n <div class=\"flex items-center gap-4\">\n <div class=\"relative\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u641c\u7d22\u6807\u7b7e...\" \n class=\"pl-10 pr-4 py-2 rounded-full bg-gray-100 border-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all w-48 sm:w-64 text-sm\">\n <i class=\"fa-solid fa-search absolute left-3 top-1\/2 -translate-y-1\/2 text-gray-400\"><\/i>\n <\/div>\n \n\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full\">\n \n \n <div class=\"flex justify-between items-center mb-6\">\n <p class=\"text-sm text-gray-500\">\u5171 <span id=\"photoCount\" class=\"font-bold text-indigo-600\">250<\/span> \u5f20\u7167\u7247<\/p>\n <div class=\"flex gap-2\">\n <select id=\"sortSelect\" class=\"bg-white border border-gray-200 text-sm rounded-lg px-3 py-1.5 focus:ring-indigo-500 focus:border-indigo-500\">\n <option value=\"default\">\u9ed8\u8ba4\u6392\u5e8f<\/option>\n <option value=\"random\">\u968f\u673a\u6392\u5e8f<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div id=\"galleryContainer\" class=\"masonry-grid\">\n \n <\/div>\n\n \n <div id=\"emptyState\" class=\"hidden flex-col items-center justify-center py-20 text-center\">\n <div class=\"bg-gray-100 p-6 rounded-full mb-4\">\n <i class=\"fa-regular fa-image text-4xl text-gray-400\"><\/i>\n <\/div>\n <h3 class=\"text-lg font-medium text-gray-900\">\u6682\u65e0\u7167\u7247<\/h3>\n <\/div>\n <\/main>\n\n \n <footer class=\"bg-white border-t border-gray-200 py-6 mt-auto\">\n <div class=\"max-w-7xl mx-auto px-4 text-center text-sm text-gray-500\">\n <p>© 2026 ZZ\u76f8\u518c\u96c6<\/p>\n <\/div>\n <\/footer>\n\n \n <div id=\"imageModal\" class=\"fixed inset-0 z-50 hidden\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\">\n \n <div class=\"fixed inset-0 bg-gray-900\/75 backdrop-blur-sm transition-opacity\" onclick=\"closeModal()\"><\/div>\n\n <div class=\"fixed inset-0 z-10 overflow-y-auto\">\n <div class=\"flex min-h-full items-center justify-center p-4 text-center sm:p-0\">\n <div class=\"relative transform overflow-hidden rounded-2xl bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl modal-enter\" id=\"modalPanel\">\n \n \n \n\n <div class=\"bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4 flex flex-col md:flex-row gap-6\">\n \n <div class=\"w-full md:w-2\/3 bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center min-h-[300px]\">\n <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"\u8be6\u60c5\u56fe\" class=\"max-w-full max-h-[80vh] object-contain\">\n <\/div>\n \n \n <div class=\"w-full md:w-1\/3 flex flex-col justify-between\">\n <div>\n <h3 class=\"text-xl font-semibold leading-6 text-gray-900 mb-2\" id=\"modalTitle\">\u7167\u7247\u8be6\u60c5<\/h3>\n <p class=\"text-sm text-gray-500 mb-4\" id=\"modalDate\">\u4e0a\u4f20\u65f6\u95f4<\/p>\n \n <div class=\"space-y-3\">\n <div>\n <label class=\"block text-xs font-medium text-gray-700 mb-1\">\u63cf\u8ff0\/\u6807\u7b7e<\/label>\n <p id=\"modalDesc\" class=\"text-sm text-gray-600 bg-gray-50 p-3 rounded-md border border-gray-100\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"toast\" class=\"fixed bottom-5 right-5 transform translate-y-20 opacity-0 transition-all duration-300 z-50\">\n <div class=\"bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3\">\n <i class=\"fa-solid fa-circle-check text-green-400\"><\/i>\n <span id=\"toastMessage\">\u64cd\u4f5c\u6210\u529f<\/span>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/ytubage.com\/app.js\"><\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>ZZ\u76f8\u518c\u96c6 – \u7eaf\u5c55\u793a\u7248 ZZ \u5171 250 \u5f20\u7167\u7247 \u9ed8\u8ba4\u6392\u5e8f\u968f\u673a\u6392\u5e8f \u6682\u65e0\u7167\u7247 © 20 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1,8,5,7],"tags":[],"class_list":["post-2799","post","type-post","status-publish","format-standard","hentry","category-kzjp","category-uncategorized","category-updatefile","category-dujia","category-index"],"_links":{"self":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/comments?post=2799"}],"version-history":[{"count":10,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2799\/revisions"}],"predecessor-version":[{"id":2821,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2799\/revisions\/2821"}],"wp:attachment":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/media?parent=2799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/categories?post=2799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/tags?post=2799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2799,"date":"2026-08-27T14:33:55","date_gmt":"2026-08-27T06:33:55","guid":{"rendered":"https:\/\/ytubage.com\/?p=2799"},"modified":"2026-08-27T14:35:10","modified_gmt":"2026-08-27T06:35:10","slug":"zzphotolist","status":"publish","type":"post","link":"https:\/\/ytubage.com\/index.php\/2026\/08\/27\/zzphotolist\/","title":{"rendered":"ZZ\u76f8\u518c\u96c6 – \u7eaf\u5c55\u793a\u7248"},"content":{"rendered":"\n\n\n\n \n \n ZZ\u76f8\u518c\u96c6 – \u7eaf\u5c55\u793a\u7248<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* \u81ea\u5b9a\u4e49\u6eda\u52a8\u6761 *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1;\n }\n ::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #555;\n }\n\n \/* \u7011\u5e03\u6d41\u6838\u5fc3\u6837\u5f0f\uff1a\u4f7f\u7528 CSS Columns \u5b9e\u73b0\u6700\u7b80\u4e14\u9ad8\u6027\u80fd\u7684\u7011\u5e03\u6d41 *\/\n .masonry-grid {\n column-count: 1;\n column-gap: 1.5rem;\n }\n @media (min-width: 640px) {\n .masonry-grid { column-count: 2; }\n }\n @media (min-width: 1024px) {\n .masonry-grid { column-count: 3; }\n }\n @media (min-width: 1280px) {\n .masonry-grid { column-count: 4; }\n }\n\n \/* \u9632\u6b62\u56fe\u7247\u5728\u5217\u4e2d\u65ad\u5f00 *\/\n .masonry-item {\n break-inside: avoid;\n margin-bottom: 1.5rem;\n }\n\n \/* \u56fe\u7247\u52a0\u8f7d\u524d\u7684\u5360\u4f4d\u52a8\u753b *\/\n .image-skeleton {\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: loading 1.5s infinite;\n }\n @keyframes loading {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n\n \/* \u6a21\u6001\u6846\u8fc7\u6e21\u6548\u679c *\/\n .modal-enter {\n opacity: 0;\n transform: scale(0.95);\n }\n .modal-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: opacity 0.3s ease-out, transform 0.3s ease-out;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800 font-sans antialiased min-h-screen flex flex-col\">\n\n \n <header class=\"bg-white\/80 backdrop-blur-md sticky top-0 z-40 border-b border-gray-200 shadow-sm\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n <div class=\"flex items-center gap-3\">\n <i class=\"fa-solid fa-layer-group text-indigo-600 text-2xl\"><\/i>\n <h1 class=\"text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600\">\n ZZ\n <\/h1>\n <\/div>\n \n \n <div class=\"flex items-center gap-4\">\n <div class=\"relative\">\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u641c\u7d22\u6807\u7b7e...\" \n class=\"pl-10 pr-4 py-2 rounded-full bg-gray-100 border-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all w-48 sm:w-64 text-sm\">\n <i class=\"fa-solid fa-search absolute left-3 top-1\/2 -translate-y-1\/2 text-gray-400\"><\/i>\n <\/div>\n \n\n <\/div>\n <\/div>\n <\/header>\n\n \n <main class=\"flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full\">\n \n \n <div class=\"flex justify-between items-center mb-6\">\n <p class=\"text-sm text-gray-500\">\u5171 <span id=\"photoCount\" class=\"font-bold text-indigo-600\">250<\/span> \u5f20\u7167\u7247<\/p>\n <div class=\"flex gap-2\">\n <select id=\"sortSelect\" class=\"bg-white border border-gray-200 text-sm rounded-lg px-3 py-1.5 focus:ring-indigo-500 focus:border-indigo-500\">\n <option value=\"default\">\u9ed8\u8ba4\u6392\u5e8f<\/option>\n <option value=\"random\">\u968f\u673a\u6392\u5e8f<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div id=\"galleryContainer\" class=\"masonry-grid\">\n \n <\/div>\n\n \n <div id=\"emptyState\" class=\"hidden flex-col items-center justify-center py-20 text-center\">\n <div class=\"bg-gray-100 p-6 rounded-full mb-4\">\n <i class=\"fa-regular fa-image text-4xl text-gray-400\"><\/i>\n <\/div>\n <h3 class=\"text-lg font-medium text-gray-900\">\u6682\u65e0\u7167\u7247<\/h3>\n <\/div>\n <\/main>\n\n \n <footer class=\"bg-white border-t border-gray-200 py-6 mt-auto\">\n <div class=\"max-w-7xl mx-auto px-4 text-center text-sm text-gray-500\">\n <p>© 2026 ZZ\u76f8\u518c\u96c6<\/p>\n <\/div>\n <\/footer>\n\n \n <div id=\"imageModal\" class=\"fixed inset-0 z-50 hidden\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\">\n \n <div class=\"fixed inset-0 bg-gray-900\/75 backdrop-blur-sm transition-opacity\" onclick=\"closeModal()\"><\/div>\n\n <div class=\"fixed inset-0 z-10 overflow-y-auto\">\n <div class=\"flex min-h-full items-center justify-center p-4 text-center sm:p-0\">\n <div class=\"relative transform overflow-hidden rounded-2xl bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-4xl modal-enter\" id=\"modalPanel\">\n \n \n \n\n <div class=\"bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4 flex flex-col md:flex-row gap-6\">\n \n <div class=\"w-full md:w-2\/3 bg-gray-100 rounded-lg overflow-hidden flex items-center justify-center min-h-[300px]\">\n <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"\u8be6\u60c5\u56fe\" class=\"max-w-full max-h-[80vh] object-contain\">\n <\/div>\n \n \n <div class=\"w-full md:w-1\/3 flex flex-col justify-between\">\n <div>\n <h3 class=\"text-xl font-semibold leading-6 text-gray-900 mb-2\" id=\"modalTitle\">\u7167\u7247\u8be6\u60c5<\/h3>\n <p class=\"text-sm text-gray-500 mb-4\" id=\"modalDate\">\u4e0a\u4f20\u65f6\u95f4<\/p>\n \n <div class=\"space-y-3\">\n <div>\n <label class=\"block text-xs font-medium text-gray-700 mb-1\">\u63cf\u8ff0\/\u6807\u7b7e<\/label>\n <p id=\"modalDesc\" class=\"text-sm text-gray-600 bg-gray-50 p-3 rounded-md border border-gray-100\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"toast\" class=\"fixed bottom-5 right-5 transform translate-y-20 opacity-0 transition-all duration-300 z-50\">\n <div class=\"bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3\">\n <i class=\"fa-solid fa-circle-check text-green-400\"><\/i>\n <span id=\"toastMessage\">\u64cd\u4f5c\u6210\u529f<\/span>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/ytubage.com\/app.js\"><\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>ZZ\u76f8\u518c\u96c6 – \u7eaf\u5c55\u793a\u7248 ZZ \u5171 250 \u5f20\u7167\u7247 \u9ed8\u8ba4\u6392\u5e8f\u968f\u673a\u6392\u5e8f \u6682\u65e0\u7167\u7247 © 20 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1,8,5,7],"tags":[],"class_list":["post-2799","post","type-post","status-publish","format-standard","hentry","category-kzjp","category-uncategorized","category-updatefile","category-dujia","category-index"],"_links":{"self":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/comments?post=2799"}],"version-history":[{"count":10,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2799\/revisions"}],"predecessor-version":[{"id":2821,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2799\/revisions\/2821"}],"wp:attachment":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/media?parent=2799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/categories?post=2799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/tags?post=2799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}