当前位置：首页 > JavaScript

js 实现图片列表

2026-02-03 02:26:27JavaScript

实现图片列表的方法

使用JavaScript实现图片列表可以通过动态生成HTML元素或操作DOM来实现。以下是几种常见的方法：

动态创建图片元素并添加到DOM

通过JavaScript动态创建img元素，并设置其src属性，最后添加到页面中的某个容器中。

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

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

imageUrls.forEach(url => {
  const img = document.createElement('img');
  img.src = url;
  img.alt = 'Image';
  container.appendChild(img);
});

使用模板字符串生成HTML

通过模板字符串拼接HTML字符串，然后将其插入到DOM中。

js 实现图片列表

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

const container = document.getElementById('image-container');
const html = imageUrls.map(url => `<img src="${url}" alt="Image">`).join('');
container.innerHTML = html;

使用框架（如React）

如果使用React等现代前端框架，可以通过组件化的方式实现图片列表。

function ImageList({ images }) {
  return (
    <div>
      {images.map((image, index) => (
        <img key={index} src={image} alt="Image" />
      ))}
    </div>
  );
}

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
ReactDOM.render(<ImageList images={images} />, document.getElementById('root'));

添加样式和布局

为了使图片列表更美观，可以添加CSS样式控制布局。例如，使用Flexbox或Grid布局。

js 实现图片列表

#image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#image-container img {
  width: 200px;
  height: auto;
}

懒加载优化

对于大量图片，可以使用懒加载技术优化性能。

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

const lazyLoad = (image) => {
  image.src = image.dataset.src;
  image.onload = () => {
    image.removeAttribute('data-src');
  };
};

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

images.forEach(img => observer.observe(img));

响应式图片列表

使用picture元素或srcset属性实现响应式图片加载。

<div id="image-container">
  <picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Image">
  </picture>
</div>