css 实现瀑布流

css 实现瀑布流的四种方式

  1. column-count 需要设置 break-inside: avoid; 避免分行

html:

<scetion class="wrap">
	<section class="item">这是列表</section>
	<section class="item">这是列表</section>
	<section class="item">这是列表</section>
	<section class="item">这是列表</section>
	<section class="item">这是列表</section>
	<section class="item">这是列表</section>
</scetion>

css

.wrap{
  column-count: 2;
  column-gap: 40px;
  padding:0 12px 10px;
  .item{
    break-inside: avoid;
    box-sizing: border-box;
  }
}
  1. flex布局 在item外面包了一层div.column,这个column称为列表项目的单独容器

    html

    <scetion class="wrap">
        <scetion class="column">
            <section class="item">这是列表</section>
            <section class="item">这是列表</section>
            <section class="item">这是列表</section>
        </section>
        <scetion class="column">
            <section class="item">这是列表</section>
            <section class="item">这是列表</section>
            <section class="item">这是列表</section>
        </section>
    </scetion>
    

    css

    .wrap {
      display: flex;
      flex-direction: row;
      flex-flow: wrap;
    }
    .column{
       display: flex;
       flex-direction: column;
      width: calc(100%/5);
    
    }
    .item {
      break-inside: avoid;
      box-sizing: border-box;
      padding: 10px;
      background-color: red;
      border: 1px solid #000;
      height: 300px;
      width: 300px;
    }
    
    1. macy 不支持ssr

        new Macy({
                  container: '.macy-container', // 图像列表容器
                  trueOrder: false,
                  waitForImages: false,
                  useOwnImageLoader: false,
                  debug: false,
                  margin: { x: 13, y: 4 },    // 设计列与列的间距
                  columns: 3,    // 设置列数
              })
      
    2. 自己通过js计算对应的高度及位置