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

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

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

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

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

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

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