瀑布流布局

一、瀑布流的布局原理是什么？

1.计算出浏览器可以横向排列元素的个数（元素的宽度都是相同的）：浏览器的宽度/元素的宽度；如果元素有内外边距和边框，可以通过outerWidth(true)获取。排列元素使用绝对定位position:absolute，其父元素使用相对定位position:reletive。
2.定义一个用于存放元素高度和的数组，遍历该数组找到数组中最小高度的元素，根据该元素的下标计算出top和left值。然后使用jQuery的css ()方法把下一行第一个元素放到该最小高度元素的下面。
3.重新定义数组的高度，并遍历，放置元素。
4.示范代码:

    
    
    
    


    

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

5.还有一种方法是用css3属性也可以实现瀑布流的做法。这种做法的特点是不需要计算窗口的宽度，浏览器会自动计算，只需要设置元素的列宽，代码少，性能很高。缺点就是列宽随着浏览器窗口大小进行改变，用户体验不好。还有一点就是css3的做法图片是按照垂直顺序排列的，打乱了图片的显示顺序。
css3瀑布流

本文版权归本人和饥人谷所有，转载请注明来源。