原来写瀑布流这么简单，你来你也行(三种方法实自适应现瀑布流)

效果: 

一、JQ实现自适应瀑布流

思路分析：

1.瀑布流效果就是等宽不等高，即每个元素的宽度是一样的；

2.通过js监听页面宽度变化，改变每个元素的宽，实现列数变化；

3.通过列数，计算给该给每个元素的left，top值，实现瀑布流定位；

4.从每列第二个元素开始，追加高度。

代码实现：

	
		
		
	
	
		

			
			//此处省略100个img标签
			
		

	
	

二、column 多行布局实现瀑布流

思路分析：

column 实现瀑布流主要依赖两个属性。
一个是 column-count 属性，是分为多少列。
一个是 column-gap 属性，是设置列与列之间的距离。

代码实现：

    



    

        
    
	//标签省略
	

	    
	

三、flex 弹性布局实现瀑布流

思路分析：

1.利用弹性纵向布局，并且允许换行。

代码实现：

	


	

		

			
		
		//...标签省略
		

			
		
	
	

四、对比

1.元素排列方式不一样，左边是JQ，右边是后面两种，即一个竖排，一个横排，视觉效果是差不多的；

2.flex 弹性布局实现瀑布流是左右滚动，另外两种方式是上下滚动；

3.后面两种主要是依赖css，所以不用担心元素动态生成后js获取不到元素节点问题；

4.JQ符合主流审美规范，实用性强。