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

[isayr]

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

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

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

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

[isayr]

@binux 是的，如果按照顺序id排列，这个是很容易的。

但是注意看，2种组别中元素数目并不相同。而dom元素中并未对两种组做任何区分，而是随机的出现这两种组合形式（第一种组是7张图一组，第二种是10张图片一组的）。他的每一组的色彩都是相近的，组的颜色也不是按照一定循序来排列的，比如

可能是红黄蓝绿 蓝红绿蓝红黄。。。这样的。而不是红黄蓝绿 红黄蓝绿（按组循序排列） 或者 红黄蓝绿 蓝绿红黄(按组随机排列)

[isayr]

@skoparex 分析的很不错。这个我们也想到过。但是通过观察发现。如果是按照一组一组的上传的话，那图片可能就会被限定到这个组中。下一次我又要去更新一组不同的图片，而实际上，lover.ly并没有这样，这些图片是按照色彩可以随机组合的，比如一张图片有两个色系，那可能今天它在A色系组中，明天可能他就在B色系组中。不可能编辑去一张一张这样换的。

另外我觉得不是按组上传的原因是，看详细页面id，并不连续，有的甚至差好几百个id。

[takwai]

数据库存放着每张图片的信息，这张图片包含了什么？有哪几种颜色、有没花或者有没蛋糕？

点一张图片进去看看，右侧有个"Tag"存放着这张照片的信息。估计就是按这个 Tag 来检索。

[raptium]

色系可以自動算出來的，不需要手動去編輯的

可以想到的一個一個簡單算法是
1. RGB->HSV color space
2. 在 hue 上面做 histogram，需要多少個色系就做的多少個 bin
3. 設定一個 threshold，如果一個 hue 出現了足夠多的次數，就認為此圖屬於該色系

此算法支持一張圖屬於多個色系的情況

[isayr]

其实大家都说到了点子上的。固定布局，色彩采样或者tag检索，这些单个都能分析出来。但是如何整合到一起。
这样说吧。
1.20张图（id：1-20） 每张图片都有各种大小的图
2.数据表中每个图有颜色tag（我们定为4个颜色（a,b,c,d）），其中某些图片有2到3个颜色tag

需求：现在要将这20张图按照不同的颜色放入2个组（A组2张一组，B组3张一组）中，图片不能重复出现。

不知道这样来建立模型解决是否会有利于大家讨论

[skoparex]

嗯。。。。。。其实我发现想多了。

我看了下 首页有五个分类
Featured | Browse | Popular | My Style | Ask A Pro

我们讨论的是第一个，Browse和Popular，点进去发现就是普通瀑布流，我也没感觉出来是有按颜色分类的

Featured内容是固定好的，从我第一次访问到现在没发现有什么更新，内容也是只有那么多，没有下一页或者更多

我感觉，Featured是编辑操作排列的可能性很大

如果让我选择，我也愿意选择自己编辑，因为算法只能模拟一种逻辑，不能代替人类的感官

这个事情还是编辑来做比较好，而且就这个页面看来，工作量不大

如果你非要说算法的话，我只有下面一点想法

上传的时候取图片RGB什么的，然后把前几个比重大的颜色的RGB和所占比重放入数据库

在Featured页面，计算一段时间内上传的图片，将他们按照RGB排列在一起
（按Tag其实更简单）

随机放入A种排列或者B种排列

当随机到A排列方式的时候且进行到视频格子的时候，查询最近一个小时是否有视频。有的话放入A排列中的视频格子内，没有就放入图片

@isayr

[skoparex]

最主要让我觉得他是编辑操作的 是因为这个更新太慢了 如果是通过数据库生成这也太慢了 他更新量每天应该少不了 如果是系统每天只定时刷新一次或者几次 那我就。。。。。。

[binux]

@isayr 你想复杂了，仔细看的话，图的尺寸一共只有5种。
假设存储的图片有id，尺寸，颜色三个属性，并且足够多。
当生成一组的时候，首先随机选择一个颜色，然后在对应位置中填入对应尺寸的图，就可以了。

什么不重复出现，这个太简单了，而且也没有要求每次展示都是最新的

[shinwood]

同一张图的不同尺寸，给楼主一个参考想法
http://crops.lover.ly/220x180_11275_629ab25bbfd3f047.jpg
http://crops.lover.ly/460x380_11275_629ab25bbfd3f047.jpg

[loddit]

单说布局，我发现的规律是他们每三行构成的大格都是底部对齐的（已最小一格的高度算一行），
这样他就可以事先设计出几种高度为三行的模板，然后随机使用就可以啦。

当然这只是一种猜测，很可能不是真相，但我想用这样的方法也能产生类似的效果。

btw
开始还以为这个是4列的布局，但是其中相邻的格子又可以任意合并～ 用一种算法来保证整体被填充整齐就可以，但发现有的地方还有错位。

[franky_xhl]

LZ看看这个Jquire扩展如何？
http://isotope.metafizzy.co/index.html

[Julyyq]

好吧，原来这个帖子的前三十楼都不知道这是个什么玩意，那我就当下伪大牛吧过把瘾吧，哈哈，谁让我刚好知道这是肿么回事捏。
其实这种布局的核心思想是：像盖房子一样，一层层的往上垒，中间不能有空隙，当然，每个块的尺寸其实都是有考究的，总共就是那么几种，但是排列方式却很多，因为这种表现形式背后有许多复杂的算法做支持。
不多废话了，各位自己去研究吧，现成的库早有了。
http://isotope.metafizzy.co/index.html
最后，各位真大神，行行好，点一下“感谢”吧。

[binux]

@Julyyq 这个例子里面排列方式只有两种，根本不需要算法。重点根本就不在于怎么排列，而且LZ还需要方案满足“每个块中的颜色统一”
-不知道是什么玩意的是你才对吧。-

[binux]

这个系统的重点不在：
给你20张图，让你正好排成如图所示的样子
而是：
给你200张图，选出20张，排成如图所示的样子

[enj0y]

HTML5 JS运算？

[cutehalo]

看了下 大概每个li里面有三种（或者更多种排列模式）
按照li里面div的class为colx的顺序对应了相应大小的图片 然后截取图片

[jiyinyiyong]

Chrome web Store 里也有这个排版的样子

[iwege]

...这个不是传统的瀑布流，这就是一个简单的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="" />


颜色方面由后端处理输出就好了啊？ 为啥要在前端做？

[isayr]

@binux 对的，其实并不是给出多少张图排成目标站的样子。而是按照一定规律排成目标站的样子。

可能是我sql学得不好，无法同时满足既要按照更新id，又要按照颜色来不重复的从库中取出想要的图片。
看来必须要先在后台确定好每一个块的颜色。图片id在颜色中循环后必须要记录下来，然后才能保证在下一个组的颜色时是从上一个颜色组结束的id开始查找记录。这样就可以避免重复取得图片又能保证每块颜色的开始图片都是更新后的图片。

[ghbjy1128]

使用栅格系统