有什么前端库可以实现 wookmark 这种看图效果?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3968 天前的主题，其中的信息可能已经有所发展或是发生改变。

http://www.wookmark.com/

wookmark 是一个类似于 pinterest 的图片分享网站.
并且在github上有开源库: https://github.com/GBKS/Wookmark-jQuery

不过, 我感兴趣的并不是首页的图片浮动布局, 这样的东西很多了.
我想问的是查看具体图片的效果是如何做出来的:

在首页点击某张图片后, 看起来新页面是直接浮在首页上的, 首页成了背景.而 url 也变化了.
关闭图片后, 首页仍在原来位置.
以我肤浅的前端知识, 这类似于 bootstrap 的 modal, 也类似于查看图片的 lightbox 效果, 但是更复杂一些.
现在 pinterest 也是这样的查看效果. 它的好处是, 用户在首页的无限瀑布流中滚动, 发现感兴趣的内容并查看完后, 不必重新加载首页并滚动.

由于本人主要做后端, 对前端都是摸着石头过河, 对于这样高大上的设计有点摸不着头脑.
还请前端达人指点迷津.

首页

图片

前端

6 条回复 • 1970-01-01 08:00:00 +08:00

shiye515

2014-01-12 12:46:02 +08:00 via Android

这技术叫pushState，改变url但不刷新页面。

guoqiao

2014-01-12 12:52:13 +08:00

@shiye515 URL 那个问题我知道的. 我想知道浮动的效果是如何做到的.

clippit

2014-01-12 13:12:00 +08:00

DOM 里新插入一个节点

#lightbox {
position: fixed;
width: 100%;
background-color: rgba(0,0,0,.85);
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
z-index: 105;
opacity: 1;
-moz-transition: opacity 0.15s ease-out;
-o-transition: opacity 0.25s ease-out;
-webkit-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
}

learnshare

2014-01-12 13:30:43 +08:00

弹出窗口是类似于 modal，改变 URL 是 pushState

crossmaya

2014-01-13 10:14:35 +08:00

github上有开源的history库

guoqiao

2014-01-13 12:27:28 +08:00

@clippit 谢谢你帮我找到了最关键的部分. 我已经搞定了: http://dev.writehere.com/. 非常感谢.