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

瀑布流布局及扩展——格子块的智能堆砌
作者:Neoxone    发表时间: 2011年10月12号,星期三     阅读:27,694 次

图片分享网站Pinterest(beta),在不久前获得了2700$的投资,估值已超2亿元(据说现该公司团队有8人)。该网站的一大特色就是每一张分享的图片被拟作“Pin”被钉在页面上面,每一Pin依尺寸智能排列,同时滚动页面时异步加载新Pin,极具效果。这种创新模式被在国内也被广泛copy,其中最有前途的当属Mark之,以”Mark”代”Pin”,也算有些想法。

以下是利用豆瓣API数据做的效果:完整效果
部分代码:

这种布局中虽然每个Pin的高度不尽相同,但是他们的宽度都是一样的。
那么假如,很邪恶的提出一个要求,宽度也不尽相同,只是说宽高都按比例成倍增加,那还怎么排列呢?
呵呵,如下:

现在这种布局已经不能叫瀑布流了,我们称之为格子块,格子块通过算法智能堆砌。

到最后,说点下睛也好,说添下足也好,我们再加一个拖动交换格子的效果。

标签: , , ,

17 条评论 发表在“瀑布流布局及扩展——格子块的智能堆砌”上

  1. tcdona 说:

    ):15:( 我擦 这个cool

    回复

  2. shaoyun 说:

    不错的效果!默默支持一个!

    回复

    ONEBOYS 回复:

    @shaoyun, 补发了一个瀑布流的完整效果:http://www.cssass.com/blog/index.php/douban

    回复

  3. aijisud 说:

    看到这儿,我就突然想拉拉本博客的框,发现不会动啊…

    ):14:(

    回复

    ONEBOYS 回复:

    @aijisud, ):11:( 倒是可以做一下

    回复

    aijisud 回复:

    @ONEBOYS, 期待啊~~肯定很好玩儿~~

    回复

  4. callmestring 说:

    类似float left,并判断重叠定位

    回复

    ONEBOYS 回复:

    浮动并不重要,可有可无的。

    回复

    callmestring 回复:

    @ONEBOYS, 嗯,格子都是绝对定位。我的意思是类似floast: top-left的布局,只是现在浏览器不支持这中布局

    回复

  5. spike 说:

    ):7:( 很不错,收藏了!

    回复

  6. 热狗狗 说:

    花了点时间把第一部分的sort()里的算法看明白了,下面两个我就没看了,原谅我……

    回复

  7. foo 说:

    ):10:( sort算法看不懂

    回复

  8. sp42 说:

    我想说,兄弟你很牛

    回复

  9. pl8787 说:

    http://www.3lian.com/down/flash/f22/53132.html
    CSS+JS如何实现这样的图片自由排布呢?

    回复

    ONEBOYS 回复:

    看上去好像是任意全智能的,但我觉得应该是采取策略规避了一些东西,可以下下来看看as怎么写的,算法是不分语言的,as怎么写js抄一下是一样的。

    回复

留下回复

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