{"id":21389338,"url":"https://github.com/isaced/react-flex-images","last_synced_at":"2025-07-13T15:33:02.924Z","repository":{"id":57688479,"uuid":"473233994","full_name":"isaced/react-flex-images","owner":"isaced","description":"A lightweight react wrapper for creating fluid galleries as seen on Flickr and Google Images, based on Pixabay/JavaScript-flexImages","archived":false,"fork":false,"pushed_at":"2022-03-30T11:52:03.000Z","size":644,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-19T11:05:52.279Z","etag":null,"topics":["gallery","pixabay","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/isaced.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-23T14:53:19.000Z","updated_at":"2023-03-17T12:56:31.000Z","dependencies_parsed_at":"2022-08-25T15:40:59.421Z","dependency_job_id":null,"html_url":"https://github.com/isaced/react-flex-images","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/isaced/react-flex-images","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaced%2Freact-flex-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaced%2Freact-flex-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaced%2Freact-flex-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaced%2Freact-flex-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/isaced","download_url":"https://codeload.github.com/isaced/react-flex-images/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaced%2Freact-flex-images/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262762438,"owners_count":23360327,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gallery","pixabay","react"],"created_at":"2024-11-22T12:26:02.496Z","updated_at":"2025-07-13T15:33:02.664Z","avatar_url":"https://github.com/isaced.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-flex-images [![npm](https://img.shields.io/npm/v/react-flex-images.svg?style=flat-square)](https://www.npmjs.com/package/react-flex-images)\n\n一个轻量级的封装实现类似 Pixabay/Flickr/Google Images 的横向瀑布流（画廊）布局，基于 [Pixabay/JavaScript-flexImages](https://github.com/Pixabay/JavaScript-flexImages) 开发。\n\n[English](./README.md) | 简体中文\n\n## ✨ 特性 \n\n- 轻量级：4.8 kB JavaScript - gzipped 不到 1.8 kB \n- 支持任意大小图像\n- 响应式\n- 通过 CSS 控制的图像之间的相等边距\n- 不会裁剪或重排序\n- 支持 AJAX 比如实现无限加载\n- 支持自定义控制布局 （如最大行数、是否现实不完整的最后一行）\n\n## 📃 示例\n\n![Preview](https://user-images.githubusercontent.com/2088605/159846905-eddb7ef8-b710-4ca5-bd06-0c373cb510fe.png)\n\n[![EditOnCodeSanbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-flex-images-example-c26qfu)\n\n\n## 📦 安装 \n\n```bash\n$ npm install react-flex-images\n```\n\n## 🔨 使用 \n\n```jsx\nimport { FlexImagesContainer, FlexImagesItem } from \"react-flex-images\";\n\nconst App = () =\u003e (\n  \u003c\u003e\n    \u003cFlexImagesContainer rowHeight={300} maxRows={20} truncate\u003e\n        \u003cFlexImagesItem imgUrl=\"...\" imgWidth={...} imgHeight={...} /\u003e\n        \u003cFlexImagesItem imgUrl=\"...\" imgWidth={...} imgHeight={...} /\u003e\n        ...\n    \u003c/FlexImagesContainer\u003e\n  \u003c/\u003e\n);\n```\n\n## 设置\n\n| 属性  \t     | 默认值 \t   | 描述                                                                             \t|\n|-----------\t|---------\t|----------------------------------------------------------------------------------\t|\n| rowHeight \t| 300     \t| 最大行高                                                                          \t|\n| maxRows   \t| null    \t| 最大行数，超出隐藏 \t                                                                 |\n| truncate  \t| false   \t| 如果最后一行未填满，是否隐藏                                                           \t|\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaced%2Freact-flex-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisaced%2Freact-flex-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaced%2Freact-flex-images/lists"}