摘要：

　　瀑布流布局已经很早就流行起来了，最近项目中用到了，就整理了下。最早使用的是pinterest（https://www.pinterest.com/），在国内最常见的就是淘宝了（http://guang.taobao.com/），蘑菇街了（http://www.mogujie.com/book/clothing/）等等。本文主要为了说明两点，一个是如何实现瀑布流，另一个就是瀑布流布局。

瀑布流原理：

　　瀑布流是为了解决​一次性加载数据比较慢而设计的。其原理类似于数据列表分页，但是事件对象不一样，一个是click事假，另一个是mousescroll事件。瀑布流是当用户滚动一定距离时向服务端请求数据加载进来。下面是一个瀑布流的Demo：

1   2   3       4         
       5          17      18      19         
     
       20             
      
        21                 
       
 22                     这是一条模拟数据 23                 
 24                 
       
 25                     这是一条模拟数据 26                 
 27                 
       
 28                     这是一条模拟数据 29                 
 30                 
       
 31                     这是一条模拟数据 32                 
 33                 
       
 34                     这是一条模拟数据 35                 
 36                 
       
 37                     这是一条模拟数据 38                 
 39                 
       
 40                     这是一条模拟数据 41                 
 42                 
       
 43                     这是一条模拟数据 44                 
 45                 
       
 46                     这是一条模拟数据 47                 
 48                 
       
 49                     这是一条模拟数据 50                 
 51                 
       
 52                     这是一条模拟数据 53                 
 54                 
       
 55                     这是一条模拟数据 56                 
 57                 
       
 58                     这是一条模拟数据 59                 
 60                 
       
 61                     这是一条模拟数据 62                 
 63                 
       
 64                     这是一条模拟数据 65                 
 66                 
       
 67                     这是一条模拟数据 68                 
 69                 
       
 70                     这是一条模拟数据 71                 
 72                 
       
 73                     这是一条模拟数据 74                 
 75                 
       
 76                     这是一条模拟数据 77                 
 78                 
       
 79                     这是一条模拟数据 80                 
 81             
      
 82         
     
 83          84         109     110 

瀑布流布局：

　　有两种样式的布局，一种像蘑菇街这种高宽固定的

　　另一种就像淘宝高度不统一的

 

 对于上面那种高宽都统一的，有几种实现方式：

• 将各列固定宽度，并且左浮动就可以了
• 绝对定位
• CSS3，如下
  1  2  3      4         
          5         23     24     25         
         
          26             
          
           27                 瀑布流布局128             
          
  29             
          
           30                 瀑布流布局231             
          
  32             
          
           33                 瀑布流布局334             
          
  35             
          
           36                 瀑布流布局437             
          
  38             
          
           39                 瀑布流布局540             
          
  41             
          
           42                 瀑布流布局643             
          
  44             
          
           45                 瀑布流布局746             
          
  47             
          
           48                 瀑布流布局849             
          
  50             
          
           51                 瀑布流布局952             
          
  53         
         
  54     55 

对于淘宝高度不统一的布局需要用js来计算当前元素的left和top值，后面将分享几款类似这种布局的插件。