首页 > 请问这种布局的实现原理是什么

请问这种布局的实现原理是什么

地址:http://overapi.com/css


刚才用f12看了一下,元素是绝对定位,通过js来改变元素的位置。在页面宽度缩小的时候,最右边一列的元素会自动跳入其它列,但插入到其他列也依然能维持每一列基本一致的长度。我有一个想法不知道对不对。举个例子,五个元素的高度分别是2,5,6,7,9。将这5个元素排成2列,将最小高度和最大高度放在一列,2+9=11是一列,5+7=12是一列,最后剩下一个高度为6的元素加在2+9=11那一列,这样就能保证每一列高度都差不多。


瀑布流布局


这种叫瀑布流
https://github.com/desandro/masonry


属于瀑布流布局,通过js计算每次的最小高度和位置,将新添加的节点放在最小高度后面,然后给其添加动画效果,就是你给出的那种效果。

【热门文章】
【热门文章】