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

[isayr]

最近朋友接到一个项目，有点仿lover.ly的意思，让我看看这个站的首页。

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

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

这是怎么一个思路呢。想了很久没有想出来。数据怎么取的。按颜色，但是貌似又不是一个颜色一个颜色这样循序取完再重复。因为有些图片会有多个颜色匹配，这样的话必定会有重复。

[barbery]

同问。。。难道有什么算法可以在储存数据库之前分类好这些图片的颜色？？？

[yyfearth]

类似 win8 metro 块 的感觉啊

[flycn1985]

真心不错，

[twm]

看了一下，没张图生成了多种尺寸，比如 http://crops.lover.ly/460x380_13095_cdcf5563118bd410.jpg http://crops.lover.ly/220x380_13095_cdcf5563118bd410.jpg
然后你就知道怎么排列了。

[kevinzhow]

try http://masonry.desandro.com

[amtb]

会不会是人工编辑的

[isayr]

等待高人出现

[isayr]

@twm 仔细看一下，生成多张图这个肯定大家都知道的。不解的是如何来取同色和如何实现瀑布组的随机性。更复杂的还有视频全部都显示在中间的大格子中。

[ayang23]

貌似不能自己上传图片，都是网站自己的，网站编辑手工搞定的每张图的风格？

[gsshcl]

desandro的masonry……
http://masonry.desandro.com/
http://vanilla-masonry.desandro.com/

[isayr]

1、人工编辑不太可能。他每页有80个单元素，难道跟新一次就去编辑80个元素？
2、也绝对不是masonry。这个不是瀑布流需要重拍元素，他的元素的是一组一组的。但是有貌似2种组，但是这个两种组又好像是随机出现的，而且看dom元素有没有对这两种组进行区分。。。

瞬间逻辑思维就凌乱了。。。

[binux]

块排列是固定的，只有两种样式，而两种样式的底边都是对齐的，要怎么排不简单吗？

[baigreen]

可惜不是love.ly

near.ly 关注一下。

[isayr]

@binux 单个的分析排列是很简单。块是固定的，两种排列方式。但是如何将数据库中的元素按照一定的方式插入这些固定的块中就很费解了。
弄不清楚是如何操作的。求教。

[binux]

@isayr 组固定之后，需要的图面尺寸总共就那么几种，记下图片的尺寸类型。生成的组的时候从对应尺寸的图里面抽就好了。

[sohoer]

首页版面应该是固定的,或者是几组版块是固定的

其它页都是瀑布流

[sohoer]

图像上传的时候应该需要确定色域，生成缩略图

[udonmai]

你看他左上角可以选择颜色，说明他们后端是有颜色分析算法的，按颜色来将图片分组，首页根据颜色分组就显得再自然不过了。

再者，首页就是个延时加载，图片分组也是被编辑过的，就是稍微有点特别嘛。。

[skoparex]

我觉得图片可能是以组为单位上传的

仔细数了下，发现主要有2个排列方式，A种排列方式为7个格子，B种排列方式为9个格子

在上传的的时候有预定义的排列方式可以选择，一次不是上传一张，而是上传一组，插入到对应的格子里面

这样就合理解释了为什么色调比较统一，视频为什么总在那个大格子里面

其实编辑需要做的事情比较少，就是把同一组图片上传并插入到制定的格子里面就好了

甚至除了视频外的几个格子都可以直接批量上传，让系统自己去排列，而判断到有视频的话（假如系统给了一个输入视频地址的输入框，或者视频是自己上传的，根据后缀区分）就把视频插入到大方格里面

至于图片的宽高控制，一个是系统自动生成缩略图，一种是设置为css/js控制。


排列A:


排列B:


不过这些都是猜测，根本没深入看过该网站CSS，也没专门注册去试试，只是针对这种布局提出的一个可能的实现方式。

[skoparex]

颜色图片分组 可以直接编辑的时候 当Tag一样直接打上去 在后台就不需要系统自己去判断了嘛，这种方式特别适合我这种懒人~~~~~~~~~~·