去年做了一个自号“ 格子块的智能堆砌 ”的效果, 当时瀑布流已激发了国内的第一批模仿者,微软的Merto也刚震撼了设计界。
今天把原来的效果改动优化了下,打造一个Metro风混搭瀑布流。
这次改动的目的,其实是为了想发布到这个网站上:RunJS,毕竟放自己blog上可以随意点,发别人网站上要太差劲那就有些不好意思了。
RunJS的创意来源应该是国外的 CodePen 或 CodePen 或其他。具体渊源我们就不考究了,不过的确是一个展示交流的好平台。
废话毕,上代码:
—————————–
应大家要求,我将主要的sort方法取出来,再做个简单demo test。大家可以看看,有什么可以改进的地方吧。
效果杠杠地!
回复
效果杠杠地!
回复
好厉害哇..想学习哇,可以讲一下思路吗??谢谢阿~~
回复
ONEBOYS 回复:
一月 6th, 2013 at 17:39
简单的说下,就是将单元格子的坐标点设成一个对象的key,每处理一个格子增加一个key(大格子会增加多个key),后来的key不能与存在的key相同。同时用value记录坐标(大格子多余的key没有value,其实我设为了0)。具体我编辑下文章,将sort方法取出来做个简单的demo test吧。
回复
[...] 37个回复 回复: BI的运行插件在webkit内核浏览器下会有些问题,如果是这些浏览器用户,可以把代码拷到本地运行或访问我的blog地址:http://www.cssass.com/blog/index.php/2012/1354.html 回复: 这个要顶一个 Metro色彩风格很棒 回复: 收藏之。。。。。。。。。。。 回复: 收藏了。。。。。。。。。。。。 回复: 看不懂,只看到魔方。 回复: 路过,不错 回复: 必须的,支持原创,支持分享 回复: 能横着来就和Win8的效果一样了。。。 回复: 不错,支持下,就是不知道自己要把色块换成图片怎么换? 回复: 学习了。谢谢楼主分享。 回复: 收藏了,谢谢! 回复: 很好很强大 回复: 收藏了! 回复: 色彩漂亮 回复: 不错!!!!! 回复: 路过, 回复: 效果不错,很强大 回复: 好贴~~~~~~~~~~~~~~~~~~ 回复: 厉害啊 记下啦啊 回复: 好像这个有点问题,如果换成图片后就很容易看出来了,大格子里面有三层DIV,但自动生成的宽高,大格子里面这3个都没有统一,应该都统一成最外面那个的宽高吧。 回复: 因为我的前提是大格子的尺寸是任意的,我不应该去改变大格子实际内容的尺寸。所以会有这个问题。 [...]
[...] http://www.cssass.com/blog/index.php/2012/1354.html 回复: 不错,正是想要的东西,非常感谢哈! 本条目发布于 [...]
学习一下
回复
膜拜,刷新的时候有点问题,有时候刷新滚动条没了
回复