Don't be shy? Picture Network
How to use
? Method 1
Direct access: https://iuroc.github.io/haixiu/.
? Method 2
Fork this project, and then use Github Pages to deploy the /docs directory.
Project features
- Pure static website, can be deployed directly using Github Pages
- Supports data paging and display by tags, and supports scrolling to the bottom to automatically add the next page content
- Implement high-quality picture viewer based on PhotoSwipe
- When the picture viewer switches pictures, the thumbnail list scrolls and follows wherever you see it.
- When the picture viewer reaches the last picture, the next page of data is automatically added without interrupting browsing.
- Based on Location Hash, the implementation supports history.back() to close the picture viewer and is compatible with the mobile back key.
- Implemented based on Location Hash to support history.forward() to open the picture viewer and automatically restore the last location
- When closing the image viewer through Hash, it supports interrupting the animation, which is a great experience
- Automatically record the position of the scroll bar and eliminate the impact of HashChange events on the scroll bar
Related technologies
- Using Node.js Fetch API crawler
- After crawling the data, the pages are stored into multiple JSON files, with page numbers and tag information marked in the file names.
- The front end uses the Van.js framework to build a responsive UI
- The front end directly requests static JSON files through Fetch to implement paging requests.
- Implement image viewer using PhotoSwipe library
Resource updates
Please check this document: Image Collection Program README
