实现瀑布流布局的三种方式

极客

　　本文详细讲解了实现瀑布流布局的三种方式，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
　　今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。
一、JS 实现瀑布流
　　思路分析

   

• 瀑布流布局的特点是等宽不等高。   
  
• 为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。   
  
• 父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。
  

　　代码实现

2. ‹!DOCTYPE html>
3. ‹html>
4. ‹head>
5.     ‹style>
6.         .box {
7.             width: 100%;
8.             position:relative;
9.         }
10.         .item {
11.             position: absolute;
12.         }
13.         .item img{
14.             width: 100%;
15.             height:100%;
16.         }
17.     ‹/style>
18. ‹/head>
19. ‹body>
20. ‹div class="box">
21.     ‹div class="item">
22.         ‹img  src="banner.jpg" alt="" />
23.     ‹/div>
24.     ‹div class="item">
25.         ‹img  src="show.jpg" alt="" />
26.     ‹/div>
27.     ‹div class="item">
28.         ‹img  src="cloth.jpg" alt="" />
29.     ‹/div>
30.     ‹div class="item">
31.         ‹img  src="banner.jpg" alt="" />
32.     ‹/div>
33.     ‹div class="item">
34.         ‹img  src="show.jpg" alt="" />
35.     ‹/div>
36.     ‹div class="item">
37.         ‹img  src="cloth.jpg" alt="" />
38.     ‹/div>
39.     ‹div class="item">
40.         ‹img  src="banner.jpg" alt="" />
41.     ‹/div>
42.     ‹div class="item">
43.         ‹img  src="show.jpg" alt="" />
44.     ‹/div>
45.     ‹div class="item">
46.         ‹img  src="cloth.jpg" alt="" />
47.     ‹/div>
48.     ‹div class="item">
49.         ‹img  src="show.jpg" alt="" />
50.     ‹/div>
51.     ‹div class="item">
52.         ‹img  src="cloth.jpg" alt="" />
53.     ‹/div>
54.     ‹div class="item">
55.         ‹img  src="banner.jpg" alt="" />
56.     ‹/div>
57. ‹/div>
58. ‹/body>
59. ‹script src="jquery.min.js">‹/script>
60. ‹script>
61.     function waterFall() {
62.         // 1 确定图片的宽度 - 滚动条宽度
63.         var pageWidth = getClient().width-8;
64.         var columns = 3; //3列
65.         var itemWidth = parseInt(pageWidth/columns); //得到item的宽度
66.         $(".item").width(itemWidth); //设置到item的宽度
67.         var arr = [];
68.         $(".box .item").each(function(i){
69.             var height = $(this).find("img").height();
70.             if (i ‹ columns) {
71.                 // 2 第一行按序布局
72.                 $(this).css({
73.                     top:0,
74.                     left:(itemWidth) * i+20*i,
75.                 });
76.                 //将行高push到数组
77.                 arr.push(height);
78.             } else {
79.                 // 其他行
80.                 // 3 找到数组中最小高度  和 它的索引
81.                 var minHeight = arr[0];
82.                 var index = 0;
83.                 for (var j = 0; j ‹ arr.length; j++) {
84.                     if (minHeight > arr[j]) {
85.                         minHeight = arr[j];
86.                         index = j;
87.                     }
88.                 }
89.                 // 4 设置下一行的第一个盒子位置
90.                 // top值就是最小列的高度
91.                 $(this).css({
92.                     top:arr[index]+30,//设置30的距离
93.                     left:$(".box .item").eq(index).css("left")
94.                 });
96.                 // 5 修改最小列的高度
97.                 // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
98.                 arr[index] = arr[index] + height+30;//设置30的距离
99.             }
100.         });
101.     }
102.     //clientWidth 处理兼容性
103.     function getClient() {
104.         return {
105.             width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
106.             height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
107.         }
108.     }
109.     // 页面尺寸改变时实时触发
110.     window.onresize = function() {
111.         //重新定义瀑布流
112.         waterFall();
113.     };
114.     //初始化
115.     window.onload = function(){
116.         //实现瀑布流
117.         waterFall();
118.     }
119. ‹/script>
120. ‹/html>

复制代码

　　效果如下

二、column 多行布局实现瀑布流
　　思路分析：

   

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

　　代码实现：

2. ‹!DOCTYPE html>
3. ‹html>
4. ‹head>
5.     ‹style>
6.         .box {
7.             margin: 10px;
8.             column-count: 3;
9.             column-gap: 10px;
10.         }
11.         .item {
12.             margin-bottom: 10px;
13.         }
14.         .item img{
15.             width: 100%;
16.             height:100%;
17.         }
18.     ‹/style>
19. ‹/head>
20. ‹body>
21. ‹div class="box">
22.     ‹div class="item">
23.         ‹img  src="banner.jpg" alt="" />
24.     ‹/div>
25.     ‹div class="item">
26.         ‹img  src="show.jpg" alt="" />
27.     ‹/div>
28.     ‹div class="item">
29.         ‹img  src="cloth.jpg" alt="" />
30.     ‹/div>
31.     ‹div class="item">
32.         ‹img  src="banner.jpg" alt="" />
33.     ‹/div>
34.     ‹div class="item">
35.         ‹img  src="show.jpg" alt="" />
36.     ‹/div>
37.     ‹div class="item">
38.         ‹img  src="cloth.jpg" alt="" />
39.     ‹/div>
40.     ‹div class="item">
41.         ‹img  src="banner.jpg" alt="" />
42.     ‹/div>
43.     ‹div class="item">
44.         ‹img  src="show.jpg" alt="" />
45.     ‹/div>
46.     ‹div class="item">
47.         ‹img  src="cloth.jpg" alt="" />
48.     ‹/div>
49.     ‹div class="item">
50.         ‹img  src="show.jpg" alt="" />
51.     ‹/div>
52.     ‹div class="item">
53.         ‹img  src="cloth.jpg" alt="" />
54.     ‹/div>
55.     ‹div class="item">
56.         ‹img  src="banner.jpg" alt="" />
57.     ‹/div>
58. ‹/div>
59. ‹/body>

复制代码

　　效果如下：

三、flex 弹性布局实现瀑布流
　　思路分析：
　　flex 实现瀑布流需要将最外层元素设置为 display: flex，即横向排列。然后通过设置 flex-flow:column wrap 使其换行。设置 height: 100vh 填充屏幕的高度，来容纳子元素。每一列的宽度可用 calc 函数来设置，即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。
　　代码实现：

2. ‹!DOCTYPE html>
3. ‹html>
4. ‹head>
5.     ‹style>
6.         .box {
7.           display: flex;  
8.           flex-flow:column wrap;
9.           height: 100vh;
10.         }
11.         .item {
12.             margin: 10px;
13.             width: calc(100%/3 - 20px);
14.         }
15.         .item img{
16.             width: 100%;
17.             height:100%;
18.         }
19.     ‹/style>
20. ‹/head>
21. ‹body>
22. ‹div class="box">
23.     ‹div class="item">
24.         ‹img  src="banner.jpg" alt="" />
25.     ‹/div>
26.     ‹div class="item">
27.         ‹img  src="show.jpg" alt="" />
28.     ‹/div>
29.     ‹div class="item">
30.         ‹img  src="cloth.jpg" alt="" />
31.     ‹/div>
32.     ‹div class="item">
33.         ‹img  src="banner.jpg" alt="" />
34.     ‹/div>
35.     ‹div class="item">
36.         ‹img  src="show.jpg" alt="" />
37.     ‹/div>
38.     ‹div class="item">
39.         ‹img  src="cloth.jpg" alt="" />
40.     ‹/div>
41.     ‹div class="item">
42.         ‹img  src="banner.jpg" alt="" />
43.     ‹/div>
44.     ‹div class="item">
45.         ‹img  src="show.jpg" alt="" />
46.     ‹/div>
47.     ‹div class="item">
48.         ‹img  src="cloth.jpg" alt="" />
49.     ‹/div>
50.     ‹div class="item">
51.         ‹img  src="show.jpg" alt="" />
52.     ‹/div>
53.     ‹div class="item">
54.         ‹img  src="cloth.jpg" alt="" />
55.     ‹/div>
56.     ‹div class="item">
57.         ‹img  src="banner.jpg" alt="" />
58.     ‹/div>
59. ‹/div>
60. ‹/body>

复制代码

　　效果如下：

四、3种方式对比
　　如果只是简单的页面展示，可以使用 column 多栏布局和 flex 弹性布局。如果需要动态添加数据，或者动态设置列数，就需要使用到 JS + jQuery。
　　以上所述是小编给大家介绍的实现瀑布流布局的三种方式，希望对大家有所帮助。在此也非常感谢大家对脚本之家网站的支持！

---