基于jQuery & jQuery UI构建可拖拽的可变尺寸图片无限网格

嘿，刚好我之前研究过类似的无限网格实现，用Ian Li的Infinite Drag插件来复刻grafilu.ch那种超大tiles嵌套小网格的效果，完全可以按你推测的思路来做，给你一步步拆解：

和你猜的一样，参考站点的实现就是先创建超大尺寸的父级tiles，再在每个tile内部构建小网格来放置图片。这种方式既能保证拖拽时的无限延伸感，又能让图片布局有错落的层次感，比直接用小tile堆叠要更贴合目标站点的视觉效果。

• 初始化插件，配置超大tile尺寸
  首先设置拖拽容器，把tile的尺寸调大（比如2000x2000px，你可以根据想要的图片密度调整），基础配置可以参考下面的代码：

  const container = document.getElementById('infinite-grid');
  const infiniteDrag = new InfiniteDrag(container, {
    tileSize: { width: 2000, height: 2000 },
    inertia: true, // 开启拖拽惯性，更贴合参考站的手感
    bounds: null, // 设为null就是完全无限拖拽
  });
  

• 给每个tile生成嵌套网格布局
  监听tile的创建事件，在每个新生成的tile内部用CSS Grid构建小网格，然后填充图片：

  infiniteDrag.on('createTile', (tile) => {
    // 给tile设置网格样式
    tile.style.display = 'grid';
    tile.style.gridTemplateColumns = 'repeat(4, 1fr)'; // 4列网格，可按需调整
    tile.style.gridTemplateRows = 'repeat(4, 1fr)'; // 4行网格
    tile.style.gap = '24px'; // 图片之间的间距
    tile.style.padding = '48px'; // tile内部的边距
  
    // 循环生成网格内的图片元素
    for (let i = 0; i < 16; i++) {
      const img = document.createElement('img');
      // 这里可以根据tile的坐标（tile.x、tile.y）和索引生成不同图片
      // 建议先把图片地址存在dataset里，后续懒加载
      img.dataset.src = `your-image-library/${tile.x}-${tile.y}-${i}.jpg`;
      img.style.width = '100%';
      img.style.height = '100%';
      img.style.objectFit = 'cover';
      img.style.borderRadius = '6px'; // 给图片加圆角，匹配参考站风格
      tile.appendChild(img);
    }
  });
  

• 优化性能：图片懒加载
  因为是超大tile，一次性加载所有图片会导致页面卡顿，所以要在tile进入视口时再加载图片：

  infiniteDrag.on('tileVisible', (tile) => {
    const imgs = tile.querySelectorAll('img');
    imgs.forEach(img => {
      if (img.src) return; // 避免重复加载
      img.src = img.dataset.src;
    });
  });
  

• 调整视觉细节，贴近参考站
  最后给容器和tile加一些样式，还原参考站的质感：

  #infinite-grid {
    background-color: #f0f0f0; /* 匹配参考站的背景色 */
  }
  .infinite-tile {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
  }
  

你提到检查了参考站点的代码，其实可以直接查看它的tile元素——如果它的tile是超大尺寸，且内部有grid相关的样式，那这个实现思路就完全和参考站一致了。

内容的提问来源于stack exchange，提问作者JoSch