瀑布流布局的原理及实现

原理:

  1. 瀑布流布局,要求进行布局的元素等宽,然后计算元素的宽与浏览器的宽度之比,得到需要布置的列数。
  2. 创建一个数组,长度为列数,数组元素为每一列已布置元素的总高度。(一开始为0)。
  3. 将未布置的元素,依次布置到高度最小的那一列,然后更新这一列的高度,就得到了瀑布流布局。

实现:




    
    
    
    Document
    
    


     
300*100 300*70 300*150 300*250 300*80 300*90 300*120 300*180 300*100 300*70 300*150 300*250 300*80 300*90 300*120 300*180

你可能感兴趣的:(瀑布流布局的原理及实现)