sutong/SuBlog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add react-photo-album masonry gallery article

Browse Source
This commit is contained in:
Kaxi
2026-08-16 20:58:55 +08:00
parent 5efcaaae9f
commit 9ae9cea563
2 changed files with 209 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/posts/react-photo-album-masonry/img/cover.svg
+35
View File
@@ -0,0 +1,35 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1067" height="600" viewBox="0 0 1067 600">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#f4f2fb"/>
<stop offset="1" stop-color="#e9e5f6"/>
</linearGradient>
<linearGradient id="p" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#7c5cff"/>
<stop offset="1" stop-color="#fe8bbb"/>
</linearGradient>
</defs>
<rect width="1067" height="600" fill="url(#bg)"/>
<!-- 瀑布流示意：5 列不同高度的块 -->
<g font-family="sans-serif" font-size="26" font-weight="700" fill="#5b5568">
<text x="533" y="86" text-anchor="middle" font-size="40" fill="#3b3550">react-photo-album · Masonry</text>
<text x="533" y="130" text-anchor="middle" font-size="24" fill="#8a84a0">生图图库瀑布流排版实战</text>
</g>
<g stroke="#ffffff" stroke-width="6">
<rect x="140" y="180" width="150" height="130" rx="14" fill="url(#p)"/>
<rect x="302" y="180" width="150" height="200" rx="14" fill="#7c5cff" opacity="0.75"/>
<rect x="464" y="180" width="150" height="95" rx="14" fill="#fe8bbb" opacity="0.85"/>
<rect x="626" y="180" width="150" height="170" rx="14" fill="#7c5cff" opacity="0.55"/>
<rect x="788" y="180" width="150" height="120" rx="14" fill="#b39cff"/>
<rect x="140" y="326" width="150" height="200" rx="14" fill="#fe8bbb" opacity="0.6"/>
<rect x="302" y="396" width="150" height="130" rx="14" fill="#7c5cff" opacity="0.85"/>
<rect x="464" y="291" width="150" height="235" rx="14" fill="url(#p)"/>
<rect x="626" y="366" width="150" height="160" rx="14" fill="#b39cff"/>
<rect x="788" y="316" width="150" height="210" rx="14" fill="#7c5cff" opacity="0.7"/>
<rect x="140" y="542" width="150" height="90" rx="14" fill="#7c5cff" opacity="0.5"/>
<rect x="302" y="542" width="150" height="150" rx="14" fill="#fe8bbb" opacity="0.8"/>
<rect x="464" y="542" width="150" height="110" rx="14" fill="#7c5cff" opacity="0.9"/>
<rect x="626" y="542" width="150" height="180" rx="14" fill="#b39cff" opacity="0.9"/>
<rect x="788" y="542" width="150" height="100" rx="14" fill="#7c5cff"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB