这是一个创建于 4390 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近朋友接到一个项目，有点仿lover.ly的意思，让我看看这个站的首页。
看第一眼我给他说是瀑布流，他让我仔细看。发现这个货居然还真不同。
1.格式相对固定。说固定是因为就那么几种大小一组，相对，是因为其中又有排列的变化。
2.每个块中的颜色统一。
这是怎么一个思路呢。想了很久没有想出来。数据怎么取的。按颜色，但是貌似又不是一个颜色一个颜色这样循序取完再重复。因为有些图片会有多个颜色匹配，这样的话必定会有重复。
看第一眼我给他说是瀑布流，他让我仔细看。发现这个货居然还真不同。
1.格式相对固定。说固定是因为就那么几种大小一组，相对，是因为其中又有排列的变化。
2.每个块中的颜色统一。
这是怎么一个思路呢。想了很久没有想出来。数据怎么取的。按颜色，但是貌似又不是一个颜色一个颜色这样循序取完再重复。因为有些图片会有多个颜色匹配，这样的话必定会有重复。
 |
1
barbery 2012-11-26 16:09:29 +08:00
同问。。。难道有什么算法可以在储存数据库之前分类好这些图片的颜色？？？
|
 |
2
yyfearth 2012-11-26 16:12:18 +08:00
类似 win8 metro 块 的感觉啊
|
 |
3
flycn1985 2012-11-26 16:14:02 +08:00
真心不错，
|
 |
4
twm 2012-11-26 16:15:53 +08:00
看了一下，没张图生成了多种尺寸，比如 http://crops.lover.ly/460x380_13095_cdcf5563118bd410.jpg http://crops.lover.ly/220x380_13095_cdcf5563118bd410.jpg
然后你就知道怎么排列了。 |
 |
5
kevinzhow 2012-11-26 16:18:19 +08:00
|
 |
6
amtb 2012-11-26 16:19:31 +08:00
会不会是人工编辑的
|
 |
7
isayr OP 等待高人出现
|
|
8
isayr OP @twm 仔细看一下，生成多张图这个肯定大家都知道的。不解的是如何来取同色和如何实现瀑布组的随机性。更复杂的还有视频全部都显示在中间的大格子中。
|
 |
9
ayang23 2012-11-26 16:42:43 +08:00
貌似不能自己上传图片，都是网站自己的，网站编辑手工搞定的每张图的风格？
|
 |
10
gsshcl 2012-11-26 16:44:31 +08:00
|
|
11
isayr OP 1、人工编辑不太可能。他每页有80个单元素，难道跟新一次就去编辑80个元素？
2、也绝对不是masonry。这个不是瀑布流需要重拍元素，他的元素的是一组一组的。但是有貌似2种组，但是这个两种组又好像是随机出现的，而且看dom元素有没有对这两种组进行区分。。。 瞬间逻辑思维就凌乱了。。。 |
 |
12
binux 2012-11-26 17:20:43 +08:00
块排列是固定的，只有两种样式，而两种样式的底边都是对齐的，要怎么排不简单吗？
|
 |
13
baigreen 2012-11-26 17:26:17 +08:00
|
|
14
isayr OP @binux 单个的分析排列是很简单。块是固定的，两种排列方式。但是如何将数据库中的元素按照一定的方式插入这些固定的块中就很费解了。
弄不清楚是如何操作的。求教。 |
 |
16
sohoer 2012-11-26 17:47:15 +08:00
首页版面应该是固定的,或者是几组版块是固定的
其它页都是瀑布流 |
|
17
sohoer 2012-11-26 17:54:24 +08:00
图像上传的时候应该需要确定色域，生成缩略图
|
 |
18
udonmai 2012-11-26 17:54:26 +08:00
你看他左上角可以选择颜色，说明他们后端是有颜色分析算法的，按颜色来将图片分组，首页根据颜色分组就显得再自然不过了。
再者，首页就是个延时加载，图片分组也是被编辑过的，就是稍微有点特别嘛。。 |
 |
19
skoparex 2012-11-26 17:58:23 +08:00  1
我觉得图片可能是以组为单位上传的
仔细数了下，发现主要有2个排列方式，A种排列方式为7个格子，B种排列方式为9个格子 在上传的的时候有预定义的排列方式可以选择，一次不是上传一张，而是上传一组，插入到对应的格子里面 这样就合理解释了为什么色调比较统一，视频为什么总在那个大格子里面 其实编辑需要做的事情比较少，就是把同一组图片上传并插入到制定的格子里面就好了 甚至除了视频外的几个格子都可以直接批量上传，让系统自己去排列，而判断到有视频的话（假如系统给了一个输入视频地址的输入框，或者视频是自己上传的，根据后缀区分）就把视频插入到大方格里面 至于图片的宽高控制，一个是系统自动生成缩略图，一种是设置为css/js控制。 排列A:  排列B:  不过这些都是猜测，根本没深入看过该网站CSS，也没专门注册去试试，只是针对这种布局提出的一个可能的实现方式。 |
|
20
skoparex 2012-11-26 18:00:52 +08:00
颜色图片分组 可以直接编辑的时候 当Tag一样直接打上去 在后台就不需要系统自己去判断了嘛，这种方式特别适合我这种懒人~~~~~~~~~~·
|
|
21
isayr OP @binux 是的，如果按照顺序id排列，这个是很容易的。
但是注意看，2种组别中元素数目并不相同。而dom元素中并未对两种组做任何区分，而是随机的出现这两种组合形式（第一种组是7张图一组，第二种是10张图片一组的）。他的每一组的色彩都是相近的，组的颜色也不是按照一定循序来排列的，比如 可能是红黄蓝绿 蓝红绿蓝红黄。。。这样的。而不是红黄蓝绿 红黄蓝绿（按组循序排列） 或者 红黄蓝绿 蓝绿红黄(按组随机排列) |
|
22
isayr OP @skoparex 分析的很不错。这个我们也想到过。但是通过观察发现。如果是按照一组一组的上传的话，那图片可能就会被限定到这个组中。下一次我又要去更新一组不同的图片，而实际上，lover.ly并没有这样，这些图片是按照色彩可以随机组合的，比如一张图片有两个色系，那可能今天它在A色系组中，明天可能他就在B色系组中。不可能编辑去一张一张这样换的。
另外我觉得不是按组上传的原因是，看详细页面id，并不连续，有的甚至差好几百个id。 |
 |
23
takwai 2012-11-26 18:43:33 +08:00
数据库存放着每张图片的信息，这张图片包含了什么？有哪几种颜色、有没花或者有没蛋糕？
点一张图片进去看看，右侧有个"Tag"存放着这张照片的信息。估计就是按这个 Tag 来检索。 |
 |
24
raptium 2012-11-26 18:51:20 +08:00
色系可以自動算出來的，不需要手動去編輯的
可以想到的一個一個簡單算法是 1. RGB->HSV color space 2. 在 hue 上面做 histogram，需要多少個色系就做的多少個 bin 3. 設定一個 threshold，如果一個 hue 出現了足夠多的次數，就認為此圖屬於該色系 此算法支持一張圖屬於多個色系的情況 |
|
25
isayr OP 其实大家都说到了点子上的。固定布局，色彩采样或者tag检索，这些单个都能分析出来。但是如何整合到一起。
这样说吧。 1.20张图（id：1-20） 每张图片都有各种大小的图 2.数据表中每个图有颜色tag（我们定为4个颜色（a,b,c,d）），其中某些图片有2到3个颜色tag 需求：现在要将这20张图按照不同的颜色放入2个组（A组2张一组，B组3张一组）中，图片不能重复出现。 不知道这样来建立模型解决是否会有利于大家讨论 |
|
26
skoparex 2012-11-26 20:27:41 +08:00
嗯。。。。。。其实我发现想多了。
我看了下 首页有五个分类 Featured | Browse | Popular | My Style | Ask A Pro 我们讨论的是第一个，Browse和Popular，点进去发现就是普通瀑布流，我也没感觉出来是有按颜色分类的 Featured内容是固定好的，从我第一次访问到现在没发现有什么更新，内容也是只有那么多，没有下一页或者更多 我感觉，Featured是编辑操作排列的可能性很大 如果让我选择，我也愿意选择自己编辑，因为算法只能模拟一种逻辑，不能代替人类的感官 这个事情还是编辑来做比较好，而且就这个页面看来，工作量不大 如果你非要说算法的话，我只有下面一点想法 上传的时候取图片RGB什么的，然后把前几个比重大的颜色的RGB和所占比重放入数据库 在Featured页面，计算一段时间内上传的图片，将他们按照RGB排列在一起 （按Tag其实更简单） 随机放入A种排列或者B种排列 当随机到A排列方式的时候且进行到视频格子的时候，查询最近一个小时是否有视频。有的话放入A排列中的视频格子内，没有就放入图片 @isayr |
|
27
skoparex 2012-11-26 20:31:12 +08:00
最主要让我觉得他是编辑操作的 是因为这个更新太慢了 如果是通过数据库生成这也太慢了 他更新量每天应该少不了 如果是系统每天只定时刷新一次或者几次 那我就。。。。。。
|
|
28
binux 2012-11-26 22:34:34 +08:00
@isayr 你想复杂了，仔细看的话，图的尺寸一共只有5种。
假设存储的图片有id，尺寸，颜色三个属性，并且足够多。 当生成一组的时候，首先随机选择一个颜色，然后在对应位置中填入对应尺寸的图，就可以了。 什么不重复出现，这个太简单了，而且也没有要求每次展示都是最新的 |
 |
29
shinwood 2012-11-26 22:53:07 +08:00
|
 |
30
loddit 2012-11-26 23:05:11 +08:00
单说布局，我发现的规律是他们每三行构成的大格都是底部对齐的（已最小一格的高度算一行），
这样他就可以事先设计出几种高度为三行的模板，然后随机使用就可以啦。 当然这只是一种猜测，很可能不是真相，但我想用这样的方法也能产生类似的效果。 btw 开始还以为这个是4列的布局，但是其中相邻的格子又可以任意合并～ 用一种算法来保证整体被填充整齐就可以，但发现有的地方还有错位。 |
 |
31
franky_xhl 2012-11-26 23:10:08 +08:00
LZ看看这个Jquire扩展如何？
http://isotope.metafizzy.co/index.html |
 |
32
Julyyq 2012-11-26 23:13:52 +08:00
好吧，原来这个帖子的前三十楼都不知道这是个什么玩意，那我就当下伪大牛吧过把瘾吧，哈哈，谁让我刚好知道这是肿么回事捏。
其实这种布局的核心思想是：像盖房子一样，一层层的往上垒，中间不能有空隙，当然，每个块的尺寸其实都是有考究的，总共就是那么几种，但是排列方式却很多，因为这种表现形式背后有许多复杂的算法做支持。 不多废话了，各位自己去研究吧，现成的库早有了。 http://isotope.metafizzy.co/index.html 最后，各位真大神，行行好，点一下“感谢”吧。 |
|
33
binux 2012-11-26 23:48:22 +08:00 1
@Julyyq 这个例子里面排列方式只有两种，根本不需要算法。重点根本就不在于怎么排列，而且LZ还需要方案满足“每个块中的颜色统一”
-不知道是什么玩意的是你才对吧。- |
|
34
binux 2012-11-27 00:04:28 +08:00
这个系统的重点不在：
给你20张图，让你正好排成如图所示的样子 而是： 给你200张图，选出20张，排成如图所示的样子 |
 |
35
enj0y 2012-11-27 02:39:49 +08:00
HTML5 JS运算？
|
 |
36
cutehalo 2012-11-27 12:35:52 +08:00
看了下 大概每个li里面有三种（或者更多种排列模式）
按照li里面div的class为colx的顺序对应了相应大小的图片 然后截取图片 |
 |
37
jiyinyiyong 2012-11-27 13:00:54 +08:00
Chrome web Store 里也有这个排版的样子
|
 |
38
iwege 2012-11-27 13:24:06 +08:00
...这个不是传统的瀑布流，这就是一个简单的lazy image loader啊？
<img data-original="http://crops.lover.ly/220x180_71_0907d3cf1785295c6.jpg" src='http://lover.ly/media/img/layout/gray-pixel.gif' class='lazy' data-image-id='329533' height='auto' alt="" /> 颜色方面由后端处理输出就好了啊？ 为啥要在前端做？ |
|
39
isayr OP @binux 对的，其实并不是给出多少张图排成目标站的样子。而是按照一定规律排成目标站的样子。
可能是我sql学得不好，无法同时满足既要按照更新id，又要按照颜色来不重复的从库中取出想要的图片。 看来必须要先在后台确定好每一个块的颜色。图片id在颜色中循环后必须要记录下来，然后才能保证在下一个组的颜色时是从上一个颜色组结束的id开始查找记录。这样就可以避免重复取得图片又能保证每块颜色的开始图片都是更新后的图片。 |
 |
40
ghbjy1128 2012-11-27 15:26:20 +08:00
使用栅格系统
|
|
41
binux 2012-11-27 15:35:22 +08:00
@isayr 这个站的目的在于卖东西对吧，但是又不是所有的图片位都是出售商品的。于是，将图片分成商品的和素材两种。更新时，优先把商品图片找个位置放上去，剩下的位置随便找个素材填充就可以了，不需要按照更新id。
|
|
42
isayr OP @binux 不对，这些图片肯定都是最新的，而不是随意填充的。今天又看了下。他生成图片的方式还各不同，貌似不是通过某种算法来实现的，也就是他的图截取的坐标很浮动。有些是靠左有些靠右，有些纯粹就是一个坐标点开始。如果是后台可以选取，那后台也太强大了。。。
怪不得到现在都没有一个仿站出来。不像pinterest一样烂大街。。。 |
|
43
binux 2012-11-27 18:04:11 +08:00
@isayr 我不认为是最新，而且没必要最新。虽然可能是最新上传的，但是并不意味着在线下没有一个素材库。那些戒指啊，蛋糕啊，最新都没有可能，也没有意义。
即使不全自动，半自动也行啊。后台展示一个组，首先拖入商品到合适格子，点击剩余的格子，随机选择素材，自动切，拖动调整位置，如果不满意，再次点击换一张素材。这个工作线下做也是可以的 |
 |
44
heroicYang 2012-11-28 10:50:35 +08:00
@iwege 我赞同你说的。love.ly的排列貌似都是定宽定高再裁剪，后端根据图片的高宽生成HTML元素节点，然后默认加载几页，后面的全部采用图片lazy load的方式，滚动到相应位置再load图片。
|
|
45
heroicYang 2012-11-28 10:53:42 +08:00
首页的瀑布流图片都是裁剪过的，不是真正的原图。所以只要有裁剪后图片的高宽，就可以进行布局了。
|
|
46
heroicYang 2012-11-28 10:58:18 +08:00
 仔细看了下HTML元素，应该就是这么回事了。 |
|
47
heroicYang 2012-11-28 11:09:06 +08:00
另外，发现首页对一张图有多种规格的裁剪，刷新后展示不同的排列方式。
|
 |
48
Keinez 2012-11-28 11:25:47 +08:00
这有啥好研究的……玩过网格你们就会发现每张图的长宽都是分别可以被某个『基本长度』整除的，按照『基本长度』划分出几种不同的图片大小，然后从原图开始裁。
也就是@ghbjy1128 所说的『栅格系统』，可惜没人理。 裁好堆叠上去就是了。排列方面应该会涉及到一点JS算法……这个不是特别清楚。不过就我使用masonry的经验，代码弄这样的效果也不难…… 至于颜色问题，有人工编辑的可能，也可以是类似http://kuler.adobe.com 的取色原理。具体怎么实现不知道（咱除了会弄CSS不会玩其他的了）。 |
|
50
isayr OP 说说我的看法：
1.图片裁剪问题。图片并不是按照固定的某个位置在裁剪（甚至不是左，右,上,下,左上右下这样的坐标），而是可以选取的，后台很强大的说，估计后台是可视化的，上传图片后可以将原图按照最长边缩放到合适比列，然后将缩放后的图片至于几种裁剪格式的预览框，再根据需要拖动裁剪部位进行裁剪。这样才能解释为什么有的图片裁剪是左对齐，有的是右对齐，有的上对齐有的是中间任意坐标点开始的。 2.关于颜色和排列。应该是这样的。后台固定给出10个分组（前台也是取的这10组）。可以对分组指定颜色。这样就解释了颜色组不是循环出现的问题。前台根据后台指定的颜色进行取图，并在每组结束时记录下当前取图的id。保证下一组从这个id开始取，这样就解释了为什么每组都是最新的，而且是不重复的。 排列并不是很多人说的masonry或者其他瀑布流，这个不是瀑布流，我提问的时候也说了，是固定的，只是类似瀑布流而已。 3.至于固定的食品和商店元素插入其中，这个应该是另外一个单独的商家系统，指定这个商品出现在第几个组，第个元素。然后代码中去判读，在插入默认图片元素时先判断这个框是否被指定了商品元素，如果指定了就显示商品或者视频元素，然后继续循环下一个。没有就插入默认图片元素。 |
|
52
isayr OP @ghbjy1128 从你的回复可以看出你根本没看明白。
一、前端请求是裁剪。。。高手，请赐教！我相信这里大家都希望知道 二、不需要算法。请问如何做的。请赐教 三、烂大街，请找一个我们看看。别把什么花瓣，蘑菇街的拿来说，不是那个。 |
|
53
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/ 实现方式无数种，关键就是使用栅格系统。 |
|
55
ghbjy1128 2012-11-30 10:09:13 +08:00
|
|
56
ghbjy1128 2012-11-30 10:35:34 +08:00
|
 |
57
firsthym 2012-11-30 14:33:17 +08:00
百分百有现成的库来做这个
|
|
58
isayr OP |
 |
59
squallsdjl 2012-12-01 02:36:58 +08:00
@skoparex 他们不可能这样去处理的，设计成本太高，而且也很stupid，你选另外一种颜色你就会发现没有那么整齐了。我看是他们对图片高度的控制，只有1x和2x两张大小，试一试，随机一定能得到这样规则的排列，不过我作为设计肯定要告诉编辑：“尽量别一口气连续传2x高度的图片啊”，搞定。
不过奇怪的是他们其他颜色的没有使用首页的高度的方案，不知道为何。这个没有讨论的意义了。 |
|
60
squallsdjl 2012-12-01 02:39:44 +08:00
另外裁剪我认为是编辑操作的，再好的工具目前也不能实现完美的视觉吧（别告诉我放到中间就算完美了～哈哈）
|
 |
61
aquarhead 2012-12-01 03:57:25 +08:00 1
记得前几天看过一个类似的页面当时的想法是这种布局应该是实现设计好一些模式, 那么生成页面的时候可以循环随机选取模式然后向其中填充图片就可以了.
然后颜色的选取上, 每一个模块(用这个名词来表示某个模式的某次具体应用)的颜色分类应该是跟第一个填充进模块的颜色有关, 比如我多次刷新之后基本有这两种情况(链接是这么发的么..): http://share.aquarhead.me/lovely1.png http://share.aquarhead.me/lovely2.png 观察下箭头的几个图片, 如果1里面俩戒指的那个图片合并到第一个模块里的话就不会出现后面的两张图片了. 具体的实现可以是生成队列然后顺序取颜色? 至于截取也可能是根据图片在模块中的位置来自动截取的吧, 比如2里面红色箭头的那张图片在右边的时候就会截左边的部分, 在中间就截取中间的部分... |
 |
62
legendlee 2012-12-01 04:14:56 +08:00
@raptium 那个网站里似乎对前景惯用色和背景惯用色做过区分，像红色的权重就很高，一张图片上只有一个不大不小的红点，也会被归类到红色。并且似乎一张图片只有一个颜色类型。
|
|
64
ghbjy1128 2012-12-01 06:45:40 +08:00
你们继续。
|
|
66
isayr OP @ghbjy1128 觉得没意义就可以走。不必在在这里装什么牛B。没有讨论价值，大家都说出很多种方式，但是都还有疑惑。你觉得你牛b.怎么不拿出一套让大家可以信服的东西，只知道吐槽。找问题谁不会。有本事就拿出解决办法。
|
|
67
isayr OP @aquarhead 关于颜色的问题，我在前面给了一个我朋友现在在用的考虑实施的方法，也就是后天为每个模块指定。关于截图的问题，这个应该是争议最大的。到底是固定还是后台认为调整位置。
谢谢你认真的去研究过。 |
|
68
binux 2012-12-01 18:03:07 +08:00
@isayr 虽然这个帖子发在程序员下，但是我还是要说，你们考虑的太程序员了！
直接photoshop拼好一组，切好图，上传就完了！ |
 |
71
diamondtin 2012-12-03 23:37:30 +08:00
图片主颜色的算法可以参考这里：
Using python and k-means to find the dominant colors in images http://charlesleifer.com/blog/using-python-and-k-means-to-find-the-dominant-colors-in-images/ 固定尺寸的网格布局可以动态也可以静态，用 Masonry 肯定可以，只是你需要预先随机一个尺寸给那个图片就能达到这个效果。虽然这里不是用的所谓“瀑布流算法”。 |
 |
72
risent 2012-12-04 11:18:37 +08:00 1
@isayr 图片裁剪这个应该是采用了内容感知(Seam carving) http://en.wikipedia.org/wiki/Seam_carving ，ImageMagick里面有相应的实现(叫做liquid rescale), http://www.imagemagick.org/Usage/resize/#liquid-rescale ，指定长宽后可以自动裁剪出图片中的重要部分
|
|
73
isayr OP |
Select Language