当前位置：首页 > JavaScript

js 实现图片列表

2026-03-16 03:05:16JavaScript

实现图片列表的 JavaScript 方法

动态生成图片列表

通过 JavaScript 动态创建 DOM 元素，将图片数据渲染到页面上。假设有一个图片 URL 数组：

const images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
];

const container = document.getElementById('image-container');

images.forEach(src => {
  const img = document.createElement('img');
  img.src = src;
  img.alt = 'Gallery image';
  container.appendChild(img);
});

使用模板字符串

对于更复杂的图片列表结构，可以使用模板字符串批量生成 HTML：

js 实现图片列表

const images = [
  { src: 'photo1.jpg', title: 'Nature' },
  { src: 'photo2.jpg', title: 'Cityscape' }
];

document.getElementById('gallery').innerHTML = `
  <ul class="image-list">
    ${images.map(image => `
      <li>
        <img src="${image.src}" alt="${image.title}">
        <p>${image.title}</p>
      </li>
    `).join('')}
  </ul>
`;

懒加载实现

对于大量图片，实现懒加载优化性能：

const lazyImages = document.querySelectorAll('img[data-src]');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });

  io.observe(target);
};

lazyImages.forEach(lazyLoad);

响应式图片列表

结合 CSS Grid 或 Flexbox 创建响应式布局：

js 实现图片列表

function createResponsiveGallery(images, columns) {
  const gallery = document.getElementById('gallery');
  gallery.style.display = 'grid';
  gallery.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;

  images.forEach(imgSrc => {
    const imgElement = document.createElement('img');
    imgElement.src = imgSrc;
    imgElement.style.width = '100%';
    gallery.appendChild(imgElement);
  });
}

图片预览功能

为图片列表添加点击预览功能：

document.querySelectorAll('.thumbnail').forEach(thumb => {
  thumb.addEventListener('click', () => {
    const fullsizeSrc = thumb.dataset.fullsize;
    const preview = document.createElement('div');
    preview.className = 'preview-overlay';
    preview.innerHTML = `
      <img src="${fullsizeSrc}" class="preview-image">
      <button class="close-preview">X</button>
    `;
    document.body.appendChild(preview);

    preview.querySelector('.close-preview').addEventListener('click', () => {
      preview.remove();
    });
  });
});

使用现代框架示例（React）

在 React 中创建图片列表组件：

function ImageGallery({ images }) {
  return (
    <div className="gallery">
      {images.map((image, index) => (
        <div key={index} className="gallery-item">
          <img 
            src={image.url} 
            alt={image.description}
            loading="lazy"
          />
        </div>
      ))}
    </div>
  );
}