Pure CSS implementation of Google Photos / 500px image layout
**This post is translated from Chinese, thanks to my sister Tian Qiong and my friend Tang Shuang for their hard work, and the original Chinese edition is here: https://github.com/xieranmaya/blog/issues/4** ## Pure CSS implementation of Google Photos / 500px image layout For sharing the secrets of getting most perfect effect in every step to the end, this can be a very long post. So you guys can jump to the part of code, demo and HOWs, which follow the last main title, if you don’t want to read it from the beginning. Or you can just check the source code of the bellow link. But my suggestion is to read it from the beginning, because it will help you understand the HOWs better with the information provided in the former part, which mainly solves the problem of some corner cases. First, let’s take a look at the result to make you more interested, resize or zoom the page to check the dynamic effect. https://xieranmaya.github.io/images/cats/cats.html  Besides, to show the source code, jsbin.com is used in some demos that we will talk about later. But the jsbin.com sometimes may not work. If that happens, just rewrite the source code in the edit box without changing the meaning. For example, press the “enter” button in the last line. PS: All the images used in the demo are from 500px.com, the the images' copyright are belonging to the author, the images' id are in t
Posted by xieranmaya on Aug 22, 2016, 6:47 AM
Tags
Related issues
- [Meta] Feedback on granular control over Copilot changes
- unexpected status 401 Unauthorized issue
- [MODEL] Measurable quality regression in Claude generation 5 (Fable 5 / Opus 5 / Sonnet 5): worse nonsense detection, ~2x verbosity, under-disclosed model fallb
- [CRITICAL] Subagent spawning and subagent pattern bugs trigger infinite recursion, infinite token usage, grossly inefficient token usage, and lost accumulated s
- Video stops playing after some minutes
- [MODEL] Claude verbose code comments by default — ignores instructions to stop.
Raise real-world problems, find people facing the same issue, and discuss solutions.5,000 issues0 comments
github (Software)
[Meta] Feedback on granular control over Copilot changes
unexpected status 401 Unauthorized issue
[MODEL] Measurable quality regression in Claude generation 5 (Fable 5 / Opus 5 / Sonnet 5): worse nonsense detection, ~2x verbosity, under-disclosed model fallb
[CRITICAL] Subagent spawning and subagent pattern bugs trigger infinite recursion, infinite token usage, grossly inefficient token usage, and lost accumulated s
Video stops playing after some minutes
[MODEL] Claude verbose code comments by default — ignores instructions to stop.
Scope Codex VS Code chats to the current workspace/project
Update on "Co-authored-by: Copilot" in commit messages
Pure CSS implementation of Google Photos / 500px image layout
**This post is translated from Chinese, thanks to my sister Tian Qiong and my friend Tang Shuang for their hard work, and the original Chinese edition is here: https://github.com/xieranmaya/blog/issues/4** ## Pure CSS implementation of Google Photos / 500px image layout For sharing the secrets of getting most perfect effect in every step to the end, this can be a very long post. So you guys can jump to the part of code, demo and HOWs, which follow the last main title, if you don’t want to read it from the beginning. Or you can just check the source code of the bellow link. But my suggestion is to read it from the beginning, because it will help you understand the HOWs better with the information provided in the former part, which mainly solves the problem of some corner cases. First, let’s take a look at the result to make you more interested, resize or zoom the page to check the dynamic effect. https://xieranmaya.github.io/images/cats/cats.html  Besides, to show the source code, jsbin.com is used in some demos that we will talk about later. But the jsbin.com sometimes may not work. If that happens, just rewrite the source code in the edit box without changing the meaning. For example, press the “enter” button in the last line. PS: All the images used in the demo are from 500px.com, the the images' copyright are belonging to the author, the images' id are in t
Comments (0)
No comments yet. Start the discussion.