恥ずかしがらないでください ピクチャーネットワーク?
使用方法
方法1
直接アクセス: https://iuroc.github.io/haixiu/。
方法2
このプロジェクトをフォークし、Github Pages を使用して/docsディレクトリをデプロイします。
プロジェクトの特徴
- 純粋な静的 Web サイト。Github Pages を使用して直接デプロイ可能
- データのページングとタグによる表示をサポートし、最後までスクロールして次のページのコンテンツを自動的に追加することをサポートします。
- PhotoSwipeをベースにした高品質画像ビューアを実装
- 画像ビューアで画像を切り替えると、サムネイル リストがスクロールして表示される場所に追従します。
- 画像ビューアが最後の画像に到達すると、閲覧を中断することなく次のページのデータが自動的に追加されます。
- ロケーション ハッシュに基づいて、この実装は画像ビューアを閉じるためのhistory.back() をサポートし、モバイルの戻るキーと互換性があります。
- 画像ビューアを開き、最後の場所を自動的に復元するhistory.forward()をサポートするために、場所ハッシュに基づいて実装されています。
- Hash を通じて画像ビューアを閉じると、アニメーションの中断がサポートされ、素晴らしいエクスペリエンスが得られます。
- スクロール バーの位置を自動的に記録し、スクロール バーに対する HashChange イベントの影響を排除します。
関連技術
- Node.js Fetch API クローラーの使用
- データをクロールした後、ページは複数の JSON ファイルに保存され、ファイル名にはページ番号とタグ情報がマークされます。
- フロントエンドは Van.js フレームワークを使用して応答性の高い UI を構築します
- フロントエンドは、ページングリクエストを実装するために、Fetch を通じて静的 JSON ファイルを直接リクエストします。
- PhotoSwipeライブラリを使用した画像ビューアの実装
リソースの更新
このドキュメントを確認してください: 画像収集プログラム README
