css3瀑布流实现

css3瀑布流实现

效果图

html代码

• 这里模拟一下, 真正开发使用框架可以使用:
• vue:

<div v-for='(item, index) in data' :key='index' >{
    
    {
    
    item.name}}</div>

• react:

data.map(item => {
    
     return <div key={
    
    item.toString()}>item.name</div>})

等等方法.

 <div class="box">
      <div class="box-item">这是1</div>
      <div class="box-item">这是2</div>
      <div class="box-item">这是3</div>
      <div class="box-item">这是4</div>
      <div class="box-item">这是5</div>
      <div class="box-item">这是6</div>
      <div class="box-item">这是7</div>
      <div class="box-item">这是8</div>
      <div class="box-item">这是9</div>
      <div class="box-item">这是10</div>
      <div class="box-item">这是11</div>
      <div class="box-item">这是12</div>
      <div class="box-item">这是13</div>
      <div class="box-item">这是14</div>
      <div class="box-item">这是15</div>
      <div class="box-item">这是16</div>
      <div class="box-item">这是17</div>
      <div class="box-item">这是18</div>
      <div class="box-item">这是19</div>
      <div class="box-item">这是20</div>
    </div>
  </div>

css代码

  .box{
    
    
      /* 设置column-count列数 */
      column-count: 2;
      /* 设置列之间的间隙 */
      column-gap: 10px;
    }
    .box-item{
    
    
      /* 让item占满一列 */
      width: 100%;
      /*同列item距离 */
      margin-bottom: 10px;
      /* 不允许切断换行 */
      break-inside: avoid;
      /* 兼容webkit内核的: safari, chrome */
      -webkit-column-break-inside: avoid;
    }