简介
b-gallery 是一款基于 React 的图片展示组件，使用时只需要引入该组件便可在页面上展示一组图片。该组件支持无限滚动、自定义样式、缩略图预览等功能，而且非常易于使用。
安装
使用该组件前，需要先安装并引入 b-gallery。你可以使用 npm 或者 yarn 进行安装：
npm install b-gallery --save
或
yarn add b-gallery
使用
在你的 React 项目中引入 b-gallery 组件：
-- -------------------- ---- -------
------ ------- ---- ------------
--- --------- --- -- --
----- ------ - ---------------------------------- --------------------------------- -----
-------- ------------- -
------ -
-----
-------- --------------- --
------
--
-上面的代码中，Gallery 组件会展示 images 数组中包含的所有图片。
参数
b-gallery 组件支持以下参数。
images
图片 URL 数组，必须提供。
例如：
<Gallery images={['https://example.com/image1.jpg', 'https://example.com/image2.png']} />currentIndex
当前选中的图片索引，从 0 开始计数，默认为 0。
例如：
<Gallery images={...} currentIndex={2} />infinite
是否支持无限循环，默认为 true。
例如：
<Gallery images={...} infinite={false} />showIndex
是否显示图片索引，默认为 true。
例如：
<Gallery images={...} showIndex={false} />transition
动画过渡时间，单位为毫秒，默认为 500。
例如：
<Gallery images={...} transition={800} />onIndexChange
图片索引发生变化时的回调函数。
例如：
<Gallery images={...} onIndexChange={(index) => { console.log('current index:', index); }} />className
自定义样式类名。
例如：
<Gallery images={...} className="my-gallery" />高级用法
使用 b-gallery 还可以实现其他一些高级需求，比如自定义每个图片的样式、实现缩略图预览等。下面是一些示例代码，供参考。
自定义每个图片的样式
b-gallery 组件通过 图片 URL 数组，必须提 属性来控制所有图片的样式，但是如果希望为每个图片设置不同的样式，可以通过 renderImage 属性实现。
<Gallery images={...} renderImage={(image, index) => (
<img src={image} style={{filter: `grayscale(${index * 10}%)`}} />
)} />上面的代码中，renderImage 属性传入一个回调函数，该函数接受两个参数：当前图片 URL 和索引。在回调函数中，我们根据索引为每个图片设置了不同的样式。
缩略图预览
经过一些配置，我们还可以让 b-gallery 在下方显示缩略图，并支持缩略图预览功能。
<Gallery images={...} thumbnailWidth="80" thumbnailHeight="80" showThumbnailPreview={true} />以上代码中，我们通过 thumbnailWidth 和 thumbnailHeight 属性分别设置缩略图的宽度和高度。showThumbnailPreview 属性设置为 true，则在图片上覆盖一个半透明的缩略图，当鼠标放在缩略图上时，会显示对应图片的预览。
结语
以上就是 b-gallery 组件的使用教程。通过它，我们可以快速搭建一个漂亮的图片墙，而且还支持一些自定义需求。希望这篇文章能够对大家的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005523181e8991b448cfb30