三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

炒冷饭,Metro风混搭瀑布流
作者:Neoxone    发表时间: 2012年12月9号,星期天     阅读:16,590 次

去年做了一个自号“ 格子块的智能堆砌 ”的效果, 当时瀑布流已激发了国内的第一批模仿者,微软的Merto也刚震撼了设计界。

今天把原来的效果改动优化了下,打造一个Metro风混搭瀑布流。

这次改动的目的,其实是为了想发布到这个网站上:RunJS,毕竟放自己blog上可以随意点,发别人网站上要太差劲那就有些不好意思了。

RunJS的创意来源应该是国外的 CodePenCodePen 或其他。具体渊源我们就不考究了,不过的确是一个展示交流的好平台。

废话毕,上代码:

—————————–
应大家要求,我将主要的sort方法取出来,再做个简单demo test。大家可以看看,有什么可以改进的地方吧。

标签: ,

7 条评论 发表在“炒冷饭,Metro风混搭瀑布流”上

  1. 林木木 说:

    效果杠杠地!

    回复

  2. ezsky 说:

    效果杠杠地!

    回复

  3. daisy 说:

    好厉害哇..想学习哇,可以讲一下思路吗??谢谢阿~~

    回复

    ONEBOYS 回复:

    简单的说下,就是将单元格子的坐标点设成一个对象的key,每处理一个格子增加一个key(大格子会增加多个key),后来的key不能与存在的key相同。同时用value记录坐标(大格子多余的key没有value,其实我设为了0)。具体我编辑下文章,将sort方法取出来做个简单的demo test吧。

    回复

  4. [...] 37个回复 回复: BI的运行插件在webkit内核浏览器下会有些问题,如果是这些浏览器用户,可以把代码拷到本地运行或访问我的blog地址:http://www.cssass.com/blog/index.php/2012/1354.html 回复: 这个要顶一个 Metro色彩风格很棒 回复: 收藏之。。。。。。。。。。。 回复: 收藏了。。。。。。。。。。。。 回复: 看不懂,只看到魔方。 回复: 路过,不错 回复: 必须的,支持原创,支持分享 回复: 能横着来就和Win8的效果一样了。。。 回复: 不错,支持下,就是不知道自己要把色块换成图片怎么换? 回复: 学习了。谢谢楼主分享。 回复: 收藏了,谢谢! 回复: 很好很强大 回复: 收藏了!   回复: 色彩漂亮 回复: 不错!!!!! 回复: 路过, 回复: 效果不错,很强大 回复: 好贴~~~~~~~~~~~~~~~~~~ 回复: 厉害啊  记下啦啊 回复: 好像这个有点问题,如果换成图片后就很容易看出来了,大格子里面有三层DIV,但自动生成的宽高,大格子里面这3个都没有统一,应该都统一成最外面那个的宽高吧。 回复: 因为我的前提是大格子的尺寸是任意的,我不应该去改变大格子实际内容的尺寸。所以会有这个问题。 [...]

  5. mitoop 说:

    学习一下

    回复

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(