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

[isayr]

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

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

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

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

[aquarhead]

记得前几天看过一个类似的页面当时的想法是这种布局应该是实现设计好一些模式, 那么生成页面的时候可以循环随机选取模式然后向其中填充图片就可以了.

然后颜色的选取上, 每一个模块(用这个名词来表示某个模式的某次具体应用)的颜色分类应该是跟第一个填充进模块的颜色有关, 比如我多次刷新之后基本有这两种情况(链接是这么发的么..):
http://share.aquarhead.me/lovely1.png
http://share.aquarhead.me/lovely2.png

观察下箭头的几个图片, 如果1里面俩戒指的那个图片合并到第一个模块里的话就不会出现后面的两张图片了. 具体的实现可以是生成队列然后顺序取颜色?

至于截取也可能是根据图片在模块中的位置来自动截取的吧, 比如2里面红色箭头的那张图片在右边的时候就会截左边的部分, 在中间就截取中间的部分...

[legendlee]

@raptium 那个网站里似乎对前景惯用色和背景惯用色做过区分，像红色的权重就很高，一张图片上只有一个不大不小的红点，也会被归类到红色。并且似乎一张图片只有一个颜色类型。

[ghbjy1128]

@isayr 预设而已。 我是noob.你们

[ghbjy1128]

你们继续。

[ghbjy1128]

@isayr 最后，你所谓的要点根本没讨论的价值。

[isayr]

@ghbjy1128 觉得没意义就可以走。不必在在这里装什么牛B。没有讨论价值，大家都说出很多种方式，但是都还有疑惑。你觉得你牛b.怎么不拿出一套让大家可以信服的东西，只知道吐槽。找问题谁不会。有本事就拿出解决办法。

[isayr]

@aquarhead 关于颜色的问题，我在前面给了一个我朋友现在在用的考虑实施的方法，也就是后天为每个模块指定。关于截图的问题，这个应该是争议最大的。到底是固定还是后台认为调整位置。

谢谢你认真的去研究过。

[binux]

@isayr 虽然这个帖子发在程序员下，但是我还是要说，你们考虑的太程序员了！
直接photoshop拼好一组，切好图，上传就完了！

[aquarhead]

@binux :D 也许人家就是这么搞的呢哈哈~ 只是我们比较喜欢程序化处理问题-.-

[isayr]

@binux
@aquarhead

嗯，确实人工去做的话也可以。如果能够智能一点。那不是更好。

[diamondtin]

图片主颜色的算法可以参考这里：
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 肯定可以，只是你需要预先随机一个尺寸给那个图片就能达到这个效果。虽然这里不是用的所谓“瀑布流算法”。

[risent]

@isayr 图片裁剪这个应该是采用了内容感知(Seam carving) http://en.wikipedia.org/wiki/Seam_carving ，ImageMagick里面有相应的实现(叫做liquid rescale), http://www.imagemagick.org/Usage/resize/#liquid-rescale ，指定长宽后可以自动裁剪出图片中的重要部分

[isayr]

@risent
@diamondtin
非常感谢提供思路。