<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>休闲/娱乐 on 琴音的博客</title>
    <link>https://103.qzz.io/tags/%E4%BC%91%E9%97%B2/%E5%A8%B1%E4%B9%90/</link>
    <description>Recent content from 琴音的博客</description>
    <generator>Hugo</generator>
    <language>zh-cn</language>
    
    <managingEditor>my@email.ab10303.dpdns.org (琴音)</managingEditor>
    <webMaster>my@email.ab10303.dpdns.org (琴音)</webMaster>
    
    <copyright>本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</copyright>
    
    <lastBuildDate>Wed, 08 Apr 2026 20:07:52 +0800</lastBuildDate>
    
    
    <atom:link href="https://103.qzz.io/tags/%E4%BC%91%E9%97%B2/%E5%A8%B1%E4%B9%90/index.xml" rel="self" type="application/rss&#43;xml" />
    

    
    

    <item>
      <title>图库</title>
      <link>https://103.qzz.io/post/test/</link>
      <pubDate>Tue, 07 Apr 2026 20:12:52 &#43;0800</pubDate>
      <author>my@email.ab10303.dpdns.org (琴音)</author>
      <guid>https://103.qzz.io/post/test/</guid>
      <description>
        <![CDATA[<h1>图库</h1><p>作者：琴音（my@email.ab10303.dpdns.org）</p>
        
          <div class="gallery-wall" id="photoWall-5aeb90445"></div>
<script>
  (function() {
    const imageUrls = JSON.parse("[\"https://raw.githubusercontent.com/ab10303/hugo-tmp/c5d4b27b2cbb6410c0822cd57996a4644f153c9f/images/kaguya/1.png\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/2.jpg\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/3.png\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/4.png\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/26.jpeg\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/5.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/6.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/7.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/8.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/9.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/10.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/11.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/12.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/13.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/14.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/15.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/16.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/17.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/18.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/19.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/20.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/21.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/22.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/23.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/24.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/25.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/28.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/29.gif\",\"https://raw.githubusercontent.com/ab10303/hugo-tmp/refs/heads/master/images/kaguya/27.gif\"]");
    let images = [];
    const wallId = '#photoWall-5aeb90445';
    let resizeTimer;
    let lastWidth = 0;
    
    function init() {
      createInitialDOM();
      loadImages();
      const wall = _$(wallId);
      if (wall && window.ResizeObserver) {
        const observer = new ResizeObserver((entries) => {
          const newWidth = entries[0].contentRect.width;
          if (Math.abs(newWidth - lastWidth) > 1) {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(renderPhotoWall, 250);
          }
        });
        observer.observe(wall);
      } else {
        window.addEventListener('resize', handleResize);
      }
    }
    
    function createInitialDOM() {
      const wall = _$(wallId);
      if (!wall || !imageUrls.length) return;
      
      wall.style.opacity = '0';
      wall.style.pointerEvents = 'none';
      
      imageUrls.forEach((url) => {
        images.push({
          width: 800,
          height: 600,
          aspectRatio: 4/3,
          url: url,
          loaded: false
        });
      });
      
      renderPhotoWall();
    }
    
    function loadImages() {
      const loadPromises = imageUrls.map((url, index) => {
        return new Promise((resolve, reject) => {
          const img = new Image();
          img.onload = () => {
            if (images[index]) {
              images[index].width = img.naturalWidth;
              images[index].height = img.naturalHeight;
              images[index].aspectRatio = img.naturalWidth / img.naturalHeight;
              images[index].loaded = true;
            }
            resolve();
          };
          img.onerror = () => {
            if (images[index]) {
              images[index].loaded = true;
            }
            resolve();
          };
          img.src = url;
        });
      });
      
      Promise.all(loadPromises)
        .then(() => {
          const wall = _$(wallId);
          if (wall) {
            wall.style.opacity = '1';
            wall.style.pointerEvents = 'auto';
            wall.style.transition = 'opacity 0.3s ease';
          }
          renderPhotoWall();
        })
        .catch((error) => console.error("图片加载失败:", error));
    }
    
    function renderPhotoWall() {
      const wall = _$(wallId);
      
      if (!images.length || !wall) return;
      
      const screenWidth = wall.offsetWidth || window.innerWidth - 40;
      lastWidth = screenWidth;
      
      wall.innerHTML = "";
      const rowHeight = 200;
      const gap = 10;
      const maxPerRow = 4;
      
      let row = [];
      let rowWidth = 0;
      const rows = [];
      
      images.forEach((img) => {
        const scaledWidth = rowHeight * img.aspectRatio;
        
        if (rowWidth + scaledWidth <= screenWidth && row.length < maxPerRow) {
          row.push(img);
          rowWidth += scaledWidth + gap;
        } else {
          if (row.length) rows.push(row);
          row = [img];
          rowWidth = scaledWidth + gap;
        }
      });
      
      if (row.length) rows.push(row);
      
      rows.forEach((row) => {
        const rowDiv = document.createElement("div");
        rowDiv.style.cssText = `display: flex; gap: ${gap}px; width: 100%`;
        
        row.forEach((img) => {
          const item = document.createElement("div");
          item.className = "photo-item";
          const flex = row.length === 1 ? '1' : img.aspectRatio;
          item.style.cssText = `flex: ${flex}; height: ${rowHeight}px`;
          
          const imgEl = document.createElement("img");
          imgEl.alt = "Gallery Image";
          imgEl.style.cssText = "width: 100%; height: 100%; object-fit: cover";
          imgEl.className = "lazyload";
          imgEl.dataset.src = img.url;
          imgEl.dataset.sizes = "auto";

          const link = document.createElement("a");
          link.href = img.url;
          link.dataset.pswpWidth = img.width;
          link.dataset.pswpHeight = img.height;
          link.target = "_blank";
          link.className = "article-gallery-item";
          link.style.cssText = "width: 100%; height: 100%";
          link.appendChild(imgEl);
          
          item.appendChild(link);
          rowDiv.appendChild(item);
        });
        
        wall.appendChild(rowDiv);
      });
    }
    
    function handleResize() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(renderPhotoWall, 250);
    }
    
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', init);
    } else {
      init();
    }
  })();
</script><link rel="preload" as="style" href="/css/gallery.min.94cd3998ffbf0abe50a0f8a9251c39f9df60899a02db59add20026d894f2d44f.css" onload="this.onload=null;this.rel='stylesheet'" />
        
        <hr><p>本文2026-04-07首发于<a href='https://103.qzz.io/'>琴音的博客</a>，最后修改于2026-04-08</p>]]>
      </description>
      
    </item>
    
  </channel>
</rss>
