lover.ly这个网站的首页很奇怪,和普通的瀑布流不同,怎么实现的呢?

2012-11-26 15:59:00 +08:00
 isayr
最近朋友接到一个项目,有点仿lover.ly的意思,让我看看这个站的首页。

看第一眼我给他说是瀑布流,他让我仔细看。发现这个货居然还真不同。

1.格式相对固定。说固定是因为就那么几种大小一组,相对,是因为其中又有排列的变化。
2.每个块中的颜色统一。

这是怎么一个思路呢。想了很久没有想出来。数据怎么取的。按颜色,但是貌似又不是一个颜色一个颜色这样循序取完再重复。因为有些图片会有多个颜色匹配,这样的话必定会有重复。
9950 次点击
所在节点    程序员
73 条回复
binux
2012-11-27 15:35:22 +08:00
@isayr 这个站的目的在于卖东西对吧,但是又不是所有的图片位都是出售商品的。于是,将图片分成商品的和素材两种。更新时,优先把商品图片找个位置放上去,剩下的位置随便找个素材填充就可以了,不需要按照更新id。
isayr
2012-11-27 15:53:22 +08:00
@binux 不对,这些图片肯定都是最新的,而不是随意填充的。今天又看了下。他生成图片的方式还各不同,貌似不是通过某种算法来实现的,也就是他的图截取的坐标很浮动。有些是靠左有些靠右,有些纯粹就是一个坐标点开始。如果是后台可以选取,那后台也太强大了。。。
怪不得到现在都没有一个仿站出来。不像pinterest一样烂大街。。。
binux
2012-11-27 18:04:11 +08:00
@isayr 我不认为是最新,而且没必要最新。虽然可能是最新上传的,但是并不意味着在线下没有一个素材库。那些戒指啊,蛋糕啊,最新都没有可能,也没有意义。

即使不全自动,半自动也行啊。后台展示一个组,首先拖入商品到合适格子,点击剩余的格子,随机选择素材,自动切,拖动调整位置,如果不满意,再次点击换一张素材。这个工作线下做也是可以的
heroicYang
2012-11-28 10:50:35 +08:00
@iwege 我赞同你说的。love.ly的排列貌似都是定宽定高再裁剪,后端根据图片的高宽生成HTML元素节点,然后默认加载几页,后面的全部采用图片lazy load的方式,滚动到相应位置再load图片。
heroicYang
2012-11-28 10:53:42 +08:00
首页的瀑布流图片都是裁剪过的,不是真正的原图。所以只要有裁剪后图片的高宽,就可以进行布局了。
heroicYang
2012-11-28 10:58:18 +08:00
仔细看了下HTML元素,应该就是这么回事了。
heroicYang
2012-11-28 11:09:06 +08:00
另外,发现首页对一张图有多种规格的裁剪,刷新后展示不同的排列方式。
Keinez
2012-11-28 11:25:47 +08:00
这有啥好研究的……玩过网格你们就会发现每张图的长宽都是分别可以被某个『基本长度』整除的,按照『基本长度』划分出几种不同的图片大小,然后从原图开始裁。
也就是@ghbjy1128 所说的『栅格系统』,可惜没人理。

裁好堆叠上去就是了。排列方面应该会涉及到一点JS算法……这个不是特别清楚。不过就我使用masonry的经验,代码弄这样的效果也不难……

至于颜色问题,有人工编辑的可能,也可以是类似http://kuler.adobe.com 的取色原理。具体怎么实现不知道(咱除了会弄CSS不会玩其他的了)。
isayr
2012-11-28 18:10:59 +08:00
@Keinez 不要把每个东西独立出来看。独立出来都不难。都知道怎么回事。
isayr
2012-11-28 18:27:36 +08:00
说说我的看法:

1.图片裁剪问题。图片并不是按照固定的某个位置在裁剪(甚至不是左,右,上,下,左上右下这样的坐标),而是可以选取的,后台很强大的说,估计后台是可视化的,上传图片后可以将原图按照最长边缩放到合适比列,然后将缩放后的图片至于几种裁剪格式的预览框,再根据需要拖动裁剪部位进行裁剪。这样才能解释为什么有的图片裁剪是左对齐,有的是右对齐,有的上对齐有的是中间任意坐标点开始的。

2.关于颜色和排列。应该是这样的。后台固定给出10个分组(前台也是取的这10组)。可以对分组指定颜色。这样就解释了颜色组不是循环出现的问题。前台根据后台指定的颜色进行取图,并在每组结束时记录下当前取图的id。保证下一组从这个id开始取,这样就解释了为什么每组都是最新的,而且是不重复的。

排列并不是很多人说的masonry或者其他瀑布流,这个不是瀑布流,我提问的时候也说了,是固定的,只是类似瀑布流而已。

3.至于固定的食品和商店元素插入其中,这个应该是另外一个单独的商家系统,指定这个商品出现在第几个组,第个元素。然后代码中去判读,在插入默认图片元素时先判断这个框是否被指定了商品元素,如果指定了就显示商品或者视频元素,然后继续循环下一个。没有就插入默认图片元素。
ghbjy1128
2012-11-29 19:33:20 +08:00
@Keinez 呵呵,补充几点。一,图片是前端请求时裁切的。二,不需要算法,只需要得出数量。三,此布局已烂大街
isayr
2012-11-29 21:46:50 +08:00
@ghbjy1128 从你的回复可以看出你根本没看明白。

一、前端请求是裁剪。。。高手,请赐教!我相信这里大家都希望知道
二、不需要算法。请问如何做的。请赐教
三、烂大街,请找一个我们看看。别把什么花瓣,蘑菇街的拿来说,不是那个。
ghbjy1128
2012-11-30 09:19:58 +08:00
@isayr
1. 自己搜timthumb
2. 按栅格预设模型
3. 随便挑了几个,差不多一个意思。
http://www.jandk.fr/
http://www.killingsworthstation.com/
http://www.traveltomilano.com/

实现方式无数种,关键就是使用栅格系统。
Keinez
2012-11-30 09:58:15 +08:00
@ghbjy1128 『只需要得出数量』神思路!
ghbjy1128
2012-11-30 10:09:13 +08:00
@Keinez 我能说什么好呢?这么简单的道理。。。
http://www.designinfluences.com/fluid960gs/16/fluid/none/
ghbjy1128
2012-11-30 10:35:34 +08:00
@Keinez @isayr

http://jsfiddle.net/vXJ5X/
这是我自己公司正在用的一套栅格,我也没有剥离出来,但原理都一样。
firsthym
2012-11-30 14:33:17 +08:00
百分百有现成的库来做这个
isayr
2012-12-01 00:53:36 +08:00
@ghbjy1128 拜托仔细看过我问的是什么。仔细去研究一下lover的排列再来说好不。要排成这样谁不会。从一开始就说了不是问怎么排列。你看你给出的列子和lover 差多少就知道了! 我有问过怎么排列成这样么?我问的是如何按照一定的规律(同色,跟新以及插入)排列成这样。

@firsthym 求库。。。。
squallsdjl
2012-12-01 02:36:58 +08:00
@skoparex 他们不可能这样去处理的,设计成本太高,而且也很stupid,你选另外一种颜色你就会发现没有那么整齐了。我看是他们对图片高度的控制,只有1x和2x两张大小,试一试,随机一定能得到这样规则的排列,不过我作为设计肯定要告诉编辑:“尽量别一口气连续传2x高度的图片啊”,搞定。
不过奇怪的是他们其他颜色的没有使用首页的高度的方案,不知道为何。这个没有讨论的意义了。
squallsdjl
2012-12-01 02:39:44 +08:00
另外裁剪我认为是编辑操作的,再好的工具目前也不能实现完美的视觉吧(别告诉我放到中间就算完美了~哈哈)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/53352

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX