vue 实例化几种方式_现代前端进阶教程之（二）：瀑布流布局纯css和javascript、vue实现瀑布流布局的几种方式...

因为专题制作需要用到瀑布流，所以这阵子总结了几种实现瀑布流的方式。

纯css实现瀑布流主要有3种方式：

    1. 多列布局multi-columns

    2.Flexbox布局

    3. grid布局

multi-columns

---

这是columns的语法：http://www.webhek.com/post/css3-multi-columns.html

html代码

<div id="box">

    <div class="item">

    div>

    <div class="item">

    div>

div>

 html结构非常简单，id:box元素是瀑布流的容器，我们的目的是让它的子元素呈现瀑布流排列。这里面可以放置n个项。

css代码

#box {

width: 400px;

column-width: 50%; /*设定列宽*/

    column-count: 2; /*列数*/

    column-gap: 0; /*列间距*/

}

.item {

    break-inside: avoid; /*避免在元素内部断行并产生新列*/

}

你只要在父级元素中设定列数column-count，列间距column-gap，列宽column-width，子元素就会呈现瀑布流排列。

然后在子元素中设定break-inside，这是为了避免子元素内部的文本块分解成单独的列。

我比较喜欢子容器刚好占满父容器，然后通过padding和margin来设置间距。

接下来就可以在item中填充图片和文字。

multi-columns实现瀑布流非常简单，能兼容IE10及以上。

但是只能够一列一列的排列。

demo:https://caizhichen.github.io/waterfall/column.html

flexbox

---

和multi-columns相比，flexbox可以说是广为人知了。

html代码

<div id="box">

<div class="column">

<div>item1div>

<div>item2div>

<div>item3div>

div>

<div class="column">

<div>item1div>

<div>item2div>

<div>item3div>

div>

<div class="column">

<div>item1div>

<div>item2div>

<div>item3div>

div>

<div class="column">

<div>item1div>

<div>item2div>

<div>item3div>

div>

div>

flexbox瀑布流需要2层包裹item。

css代码

#box {

width: 600px;

display: flex;

background: red;

}

.column {

width: 25%;

display: flex;

flex-direction: column;

}

.column div {

width: 100%;

}

通过设置2层容器，分别设定为行flex-direction:row(默认)和列flex-direction:column。

横向flex布局嵌套多列纵向flex布局，

然后在往子容器中添加内容模块。

这种方式比起multi-columns来说，更麻烦，并且无法自动堆叠。

grid

---

grid布局语法：https://www.html.cn/archives/8510

grid正在得到众多浏览器的支持，并且比flexbox更强大，我觉得很有学习的必要。

相比前面2个只能通过列排列的瀑布流来说，grid布局则可以实现横向排列的瀑布流。

html代码

<div id="box">

<div class="item">div>

<div class="item">div>

<div class="item">div>

<div class="item">div>

div>

css代码

#box {

display: grid;

grid-gap: 40px; /*复合属性，行和列间距*/

grid-template-columns: repeat(3, 1fr);/*设定3列，每个列高度相同*/

grid-auto-rows: minmax(50px, auto);/*为网格中的行设置默认大小*/

}