开个题,大家讨论一下

进入网站
很久之前我曾经在我的blog上介绍过这个网站,当时就对它以图集代替tag集的展现方式非常感兴趣,但是一直没有深入研究下去,最近项目上可能会用到这个东西,所以今天就特地去看了一下它的运行机制,后来发现其实是用一整张大图做背景,大图的地址是http://www.thebeststuffintheworld.com/images/collage/collage-1169805605.jpg
然后在大图上嵌入链接,链接的定位是通过css对left和top进行赋值来绝对定位的,以符合背景图片各个不同区域的大小,现在我想知道的是:
如果这个图集是通过相关话题的热度来确定背景图上各个图的区域大小的话,那它是如何做到根据话题的热度变化来相隔一段时间自动生成背景图,并且能把链接的定位(主要是对定位的left和top赋值)做到如此到位呢?
当然如果答案是人工整理,那我无话可说了。
下午去一个web标准群里面问了一下,没有人理我,或许在他们的思维层面只能看到这个东西是用绝对定位来布局的,而我想知道的是为何它的绝对布局能如此动态的到位。希望大家能互相讨论一下,多谢了。
另外,下午还发生了一些不愉快的事情,主要是由于web标准群里面的一些人似乎对人家问基础问题并不感冒,总是不断地说“哎呀,以后这么基础的问题你自己先思考一下或者先google一下”,或许是我的表达能力有问题,让他们觉得我在问一些很基础的问题,ok,我退群了。

或许你来这个群看看,30247792
人多不一定是好事,人少也不一定是坏事!呵呵!
这个定位不是很容易吗,既然背景图片是实时生成的,每个区域的大小位置就是已知的,那么剩下的动态生成css文件还会有什么难度吗?!
呵呵 谢谢楼上的回答
我想知道的是它的图是如何动态生成的
GD库自动生成的吧,就像一些验证码什么的,估计是可以实现的……
那如何才能生成得如此完美呢?所有的区域匹配的刚刚好,当然是经过数学计算的方式,但是我想知道的更具体一些
我是一个新手,不过也想发表一下个人的意见,说的不对还请大家给个面子,多谢^_^
不知到博主有没有发现那张图的规律:最小的图片是一个计算单位,每个大图都是小图的整数倍。这样子的数学计算我想你能够搞定吧?呵呵,说的不好还请高手指点。
补充一点儿,如果你想更具体的知道他的实现原理,最好监视他一个月,看看图片的具体移动规律。依个人拙见,他的最终参数也会随着平均值更改,所以他的图片是绝对定位的;至于显示的大小那就很容易实现了^_^
不好意思,还想补充一点儿。不要嫌我哦,我不知道这里不可以编辑自己留言的。呵呵,博主还应该注意一下那张图的class定义,相同的图片class是一样的,这也许就是规律吧。希望你能实现,我也是一名web开发人员,不过刚入门,还请各位大侠指教。
图片是一整张的作为背景的。。。。。。只是链接是绝对定位的
晕啊!
我发现你真笨呵(不好意思)
那个图片是不是动态生成的?那些代码是不是动态添加的?一整张图片难道就不能有css定位各自的位置了嘛?只是在图片上一层添加矛点,你连这个都不懂?还作设计?唉……社会啊,人类啊,悲哀ing
呵呵 楼上的如果这么厉害的话就做一个demo出来吧
最好用LAMP的环境 其他的我还真不会
另外,我发现你和那些web标准群里面的人一点区别都没有。。。
我一直在问的是这个图片是如何利用css定位来动态生成的
会不会是用程序读取图片的白色分割线?根据这些分割线得到坐标,我数字图像处理课程没有学好,但是我想这样应该是可行的吧.
呵呵,也许刚刚话说的太大了。呵呵,我现在是没有时间研究他们的实现了,不过可以推荐博主联系俄罗斯方块游戏想象,无非是把图形进行排版,而这个如果是css高手的话,我想排版是没有问题的。还有,我想了一下,他那张图是不是从上往下逐行推进呢?还是随便乱排的。如果是逐行推进的话,技术就不难;如果是随机排列,我现在只能佩服一下他们。至于博主说LAMP?我想对我这个新手你还是说linux+apache+mysql+php来的好,唉!反正是我太肤浅了,不明白LAMP是什么意思。呵呵,不和你斗嘴了,我看看申请开一下qq权限,到时候即时沟通吧。很喜欢这里的几篇文章。
呵呵,我觉得你也是没有明白我。也许是我太肤浅!图片根据css定位来生成?还是css根据图片位置来生成?个人觉得还是后者算法简单些?!你说不是嘛?还有,他这个图片是根据相关标签的热度定义的,也许他们会记录相关标签的热度,然后求平均值,然后再计算比率,然后再生成图片,同时生成网页代码,并且定义好嵌入css代码
站着说话不腰疼的典型代表…
博主,请把我的留言删除!谢谢!
还是说些话让你屏蔽我吧,唉。。。
不是说你,既然水平这么差,干脆辞职算了。抄人家的都学不会,那还站着干吗?还腰疼呢?你坐着不腚疼啊?快点儿把我的帖子删除!!!
我想了一下,可以这样来做:
它的这个图片里面有四种规格的区域,应该是根据热度来区分的,然后用GD先把最大块的push到一张空白图上,然后在push小一点的,已经push出来的把它们的坐标记在数组里,这样就不会重叠位置了。
McSpring ,我不会删除你的留言的,你连自己的网址都不敢留下来。
我会把你的留言放在这里,时刻告诉自己,这个世界上有很多各种各样(或许这就是生物多样性吧)的人在激励我继续努力,谢谢你。
图是怎么生成的?
难道你没看出来大图中的小图片都不是完整的吗?
而且切过的小图的宽和高都是倍数.
根据热度, GD应该好生成吧?
CSS 我个人感觉可以PUSH一个,然后记录LEFT和TOP的值,
这个应该也没有难度吧?
个人看法,仅做讨论,不做攻击 -_-!!
这个图的生成可以看作如下:就是在有限的空间内放置多个小图片,而且最大程度地利用空间。这个在图像可视化里有阐述,有的人采用TreeMap来展示图,而且在基础上做了一些算法。可以搜:image treemap,有个软件也许有所帮助,PhotoMesa,与之相关的论文,可以以PhotoMesa为搜索词搜到:)good luck