前端瀑布流布局几种实现方式

1，multi-column实现瀑布流

multi-column实现瀑布流主要依赖以下几个属性：

• column-count: 设置共有几列
• column-width: 设置每列宽度，列数由总宽度与每列宽度计算得出
• column-gap: 设置列与列之间的间距

column-count和column-width都可以用来定义分栏的数目，而且并没有明确的优先级之分。优先级的计算取决与具体的场景。

计算方式为：计算column-count和column-width转换后具体的列数，哪个小就用哪个。

例子：

 

 

1	<div class="masonry"> <div class="item"> <img src="..."/> <span class="title">...</span> </div> <div class="item"> <img src="..."/> <span class="title">...</span> </div> <!-- more items--> </div>

 

 

1 2 3 4 5 6 7 8 9 10 11

.masonry{     column-count: 3;     column-gap: 10px; } .masonry .item{     border:1px solid #999;     margin-bottom: 10px; } .masonry .item img{     width: 100%; }

 

2，flexbox实现瀑布流

html结构设计成如下结构：

 

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

<div class="masonry">     <!-- 第一列 -->     <div class="column">         <div class="item"></div>         <!-- more items-->     </div>     <!-- 第二列 -->     <div class="column">         <div class="item"></div>         <!-- more items-->     </div>     <!-- 第三列 -->     <div class="column">         <div class="item"></div>         <!-- more items-->     </div> </div>

 

 

上面代码中div.masonry代表当前瀑布流容器，div.column代表每一列的容器，div.item代表每一列中的每一项。

我们需要将div.masonry和div.column都通过display:flex将其设置为Flex容器。

不同的是瀑布流容器主轴方向设置为水平方向flex-direction:row,列容器主轴方向设置为垂直方向flex-direction:column

1 2 3 4 5 6 7 8 9

.masonry {     display: flex; // 设置为Flex容器     flex-direction: row; // 主轴方向设置为水平方向 }   .column {     display: flex; // 设置为Flex容器     flex-direction: column; // 主轴方向设置为垂直方向 }

 

由于当前的html结构分为了瀑布流容器和列容器，并且常见的需求图片均是从左至右再从上到下来进行排列，所以需要通过Javascript来区分每一列的具体数据：

假设分为三列，伪代码如下：

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

let data1 = [], //第一列     data2 = [], //第二列     data3 = [], //第三列     i = 0; while (i < data.length) {     data1.push(data[i++]);     if (i < data.length) {         data2.push(data[i++]);     }     if (i < data.length) {         data3.push(data[i++]);     } } return {     //第一列     data1,     //第二列     data2,     //第三列     data3 };