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