介绍
在本教程中,我们将使用React前端JavaScript框架和CSS网格来构建一个无限滚动图像画廊,使用Unsplash API(https://source.unsplash.com/)嵌入摄影图像。
此外,对于本教程,我们将使用React Hooks并在整个项目中使用功能组件。
前提条件
对于本教程,使用此 图像合并库代码作为您的起点来建立您的项目。
步骤 1 – 安装必要的包
从 CDN 导入所需的所有依赖,Codepen 提供一个搜索栏,您可以输入模块名称,然后从结果中选择一个,并将其添加到您的项目中。
安装的依赖性是:
继续点击 Unsplash,以创建应用程序并获得访问密钥。
步骤2 - 构建基础组件
在 React 中,主组件的 HTML 模板是用 JSX 编写的,我们将继续在 JSX 中编写这些构成模板的 HTML 元素。
创建一个功能组件并在 DOM 上渲染:
1let Collage = () => {
2
3 // Return JSX
4 return (
5 <div className="hero is-fullheight is-bold is-info">
6 <div className="hero-body">
7 <div className="container">
8 <div className="header content">
9 <h2 className="subtitle is-6">Code Challenge #16</h2>
10 <h1 className="title is-1">
11 Infinite Scroll Unsplash Code Challenge
12 </h1>
13 </div>
14 // Images go here
15
16 </div>
17 </div>
18 </div>
19 );
20};
21
22// Render the component to the DOM element with ID of root
23ReactDOM.render(<Collage />, document.getElementById("root"));
在这里,您创建了母组件Collage,返回了JSX中的HTML元素,并在DOM元素中以root的ID进行渲染。
步骤3 - 构建一个单一的图像组件
接下来,让我们继续创建一个单一的组件为一个收集的图像,这将有助于我们设置每个图像的位置。
创建一个单一的功能组件:
1const UnsplashImage = ({ url, key }) => (
2 <div className="image-item" key={key} >
3 <img src={url} />
4 </div>
5);
此组件收到url和key的附件,它们是要显示的图像的URL和每个渲染图像的钥匙。
步骤4:从 Unsplash 获取和渲染随机图像
Unsplash提供了一个免费的API来获取随机图像. 图像将存储在状态容器中,并从状态传送到DOM. 由于我们将使用React Hooks,我们将分别使用useState和useEffect来处理状态和生命周期方法。
在Collage组件中,创建两个状态变量,一个是以保持入口图像,另一个是以存储一个布尔语,该程序会告诉图像是否被加载。
1[...]
2
3const [images, setImages] = React.useState([]);
4const [loaded, setIsLoaded] = React.useState(false);
5
6[...]
接下来,我们将创建一个函数,使用 Axios 获取 10 个随机图像。 这样做是通过向 API 终端发送 GET 请求,同时传递获得的访问密钥和您想要返回的图像数量。
1const fetchImages = (count = 10) => {
2 const apiRoot = "https://api.unsplash.com";
3 const accessKey = "{input access key here}";
4
5 axios
6 .get(`${apiRoot}/photos/random?client_id=${accessKey}&count=${count}`)
7 .then (res => {
8 setImages([...images, ...res.data]);
9 setIsLoaded(true);
10 });
11};
Axios 是一个基于承诺的库,在解决请求时,我们使用setImages方法来填写收集的图像,以及散布之前收集的任何图像。
现在我们有存储状态的图像,让我们把这个fetchImages函数称为组件安装后。在早期版本的React中,我们会用componentDidMount生命周期方法来做到这一点。
在Collage组件中,拨打fetchImages以:
1[...]
2
3React.useEffect(() => {
4 fetchImages();
5}, []);
6
7[...]
useEffect链接采用第二个参数,即数组.链接中提供的函数每次更新或修改数组时都会运行。
现在你有一个页面,从 Unsplash 获取十个随机图像. 让我们继续在无限滚动容器中渲染图像。
React-infinite-scroll-component 提供了显示加载旋转器或任何元素作为位置保持器的能力,调用函数以获取更多数据,一旦加载器在视图中或接近视图,并显示任何指定的数据。
1<InfiniteScroll
2 dataLength={images}
3 next={() => fetchImages(5)}
4 hasMore={true}
5 loader={
6 <img
7 src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/others/df45d46aaa0cf0be2463ce067a7e14e1_scotch-logo-gif_jq4tgr.gif"
8 alt="loading"
9 />}
10 >
11 <div className="image-grid" style={{ marginTop: "30px" }}>
12 {loaded ?
13 images.map((image, index) => (
14 <UnsplashImage url={image.urls.regular} key={index} />
15 )): ""}
16 </div>
17</InfiniteScroll>
在InfiniteScroll组件中,我们将一个函数传递到下一个参数中。该函数呼叫了fetchImages函数,并传递了5的参数,即要收集的图像数。
.map() 被用来迭代状态中的 images 数组,并使用 UnsplashImage 组件来渲染每个图像。
步骤5 - 格式化画廊
我们将使用CSS网格来格式化收集的图像. 将CSS编辑为此:
1.title {
2 font-family: 'Carter One';
3}
4.container {
5 margin-top: 50px;
6 text-align: center;
7}
8
9.image-grid {
10 display: grid;
11 grid-gap: 10px;
12 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
13 grid-auto-rows: minmax(50px, auto);
14
15 .image-item:nth-child(5n){
16 grid-column-end: span 2;
17 }
18
19 img{
20 display: flex;
21 width: 100%;
22 height: 100%;
23 object-fit: cover;
24 }
25}
这将创建一个带有250px宽的列的网格,并填充整个图像容器。此外,行设置为至少50px和最大限度为自动,以适应每个图像。
对象匹配属性确保每个图像匹配或包含其容器的全部大小。
你可以在这里找到完整的画廊 https://codepen.io/Chuloo/full/BMPXqy 。
结论
在本教程中,我们使用React夹和CSS网格构建了一个图像画廊,您可以尝试使用网格来创建一个更好的设置。