Teemwu's blog

Appearance

目录

微信小程序“瀑布流”各种实现方式 ​

MUTIL-COLUMN的实现方式

html
<!--HTML-->　
    <div class="masonry">
        <div class="item animated fadeInUp" v-for="(item,index) in dataList" :key="index">
          <div class="item__content">
            <img :src="item" style="width:100%" mode="widthFix" @tap="previewGif(index)">
          </div>
        </div>
      </div>
css
/*STYLE*/
.masonry {
  width: 100%;
  column-count: 3;
  column-gap: 0;
  counter-reset: item-counter;
}

.item {
  box-sizing: border-box;
  break-inside: avoid;
  padding: 5px;
  counter-increment: item-counter;
  background-color: #fff;
}
.item__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}