vue移动端瀑布流布局

需求:

        瀑布流, 图片大小统一不变, 描述长度根据内容确定, 不超过三行.

        分两列,那边矮,下个元素就放那边

 如图所示:

1. 给item设置top,和left

由于我的项目做了 amfe-flexible适配所以使用rem

完整 template

<template>
  <div class="HomePage">
    <van-list
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="list_item" ref="list_item" id="item">
        <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
          :style="{
            top: item.top + 'rem',
            left: item.left + 'rem'
          }"
        >
          <div class="show_img">
            <img
              v-if="item.type == 'images'"
              :src="item.image"
              alt="展示图片"
            />
            <img
              v-else-if="item.type == 'video'"
              class=""
              :src="item.videoSrc.poster"
              alt=""
              @click="toVideoPage(index)"
            />
            <div class="is_vide" v-if="item.type == 'video'">
              <span class="iconfont icon-bofang"></span>
            </div>
          </div>
          <div class="item_title">
            {{ item.title }}
          </div>
          <div class="user">
            <div class="user_msg">
              <div class="user_img">
                <img :src="item.touXiang" alt="头像" />
              </div>
              <span>{{ item.userName }}</span>
            </div>
            <div class="count" @click.stop="amountOfConsent(index)">
              <van-icon name="like-o" v-if="item.agreeWithState == 0" />
              <van-icon name="like" color="#FF2442" v-else />
              <span>{{ item.agreeWith | filterAmountOfConsent }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

2. 容器也子元素子绝父相 

这里的item宽度我直接写死了180

3.描述部分,设置最多三行

完整 css

<style lang="less" scoped>
.HomePage {
  background-color: #fafafa;
}

.list_item {
  position: relative;
  .item {
    position: absolute;
    width: 180px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
    background-color: pink;
    box-sizing: content-box;
    .show_img {
      height: 240px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }

      .is_vide {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 20px;
        height: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;

        .iconfont {
          color: #fff;
          font-size: 12px;
          transform: scale(0.7);
        }
      }
    }

    .item_title {
      font-size: 15px;
      margin: 11px 11px 8px 11px;
      line-height: 20px;
      word-break: break-all;
      text-ovelow: -o-ellipsis-lastline;
      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      display: -webkit-box; //特别显示模式
      -webkit-line-clamp: 3; //行数
      line-clamp: 3;
      -webkit-box-orient: vertical; //盒子中内容竖直排
    }

    .user {
      padding: 0 8px;
      padding-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .user_msg {
        display: flex;
        align-items: center;
        .user_img {
          width: 20px;
          height: 20px;
          border-radius: 10px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }

        & > span {
          color: #999;
          font-size: 12px;
          margin-left: 6px;
          width: 85px;
          white-space: nowrap; // 强制一行显示
          overflow: hidden; // 超出隐藏
          text-overflow: ellipsis; // 省略号
        }
      }

      .count {
        color: #999;
        font-size: 12px;

        & > span {
          margin-left: 3px;
        }
      }
    }
  }
}
</style>

4, js部分

  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      designDrawing: 37.5, //设计图
      waterfallWidth: 180, // 每个盒子的宽度
      waterfallCol: 2, // 瀑布流的列数
      waterfallLeft: 5, // 每个盒子的右padding
      waterfallBottom: 8, // 每个盒子的下padding
      waterfallDeviationHeight: [], // 存放列的高度
    };
  },

获取数据后调用核心函数

 核心函数讲解

完整 rankItem()

rankItem() {
      //初始化偏移高度数组
      this.waterfallDeviationHeight = new Array(this.waterfallCol);
      for (let i = 0; i < this.waterfallDeviationHeight.length; i++) {
        this.waterfallDeviationHeight[i] = 0;
      }

      let {
        waterfallWidth,
        waterfallLeft,
        waterfallBottom,
        waterfallDeviationHeight,
      } = this;
      for (let index = 0; index < this.list.length; index++) {
        let minIndex = this.filterMin();
        this.list[index].top =
          waterfallDeviationHeight[minIndex] / this.designDrawing;
        this.list[index].left =
          (minIndex == 0
            ? waterfallLeft
            : (minIndex + 1) * waterfallLeft + minIndex * waterfallWidth) /
          this.designDrawing; //

        waterfallDeviationHeight[minIndex] +=
          240 + //图片高度
          12 +
          20 + // 头像的高度
          waterfallBottom + //外边界高度
          /*
          限制描述高度  三行78 两行61
          this.getStringWidth 计算出内容高度 
          */
          (this.getStringWidth(this.list[index].title) > 40 ? 78 : 61);
      }
    },

完整 filterMin()

 filterMin() {
      const min = Math.min.apply(null, this.waterfallDeviationHeight);
      return this.waterfallDeviationHeight.indexOf(min);
    },

完整 getStringWidth()

字体的高宽不等于字节, 所以只能通过offsetHeight获取文字高度

getStringWidth(val) {
      console.log(this.waterfallWidth);
      let divWidth = this.waterfallWidth - 22;

      let div = document.createElement("div");
      div.innerHTML = val;
      div.style.width = divWidth + "px";
      div.style =
        `
        font-size: 15px;
        line-height: 20px;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 3; //行数
        line-clamp: 3;
        -webkit-box-orient: vertical; //盒子中内容竖直排
      `;
      div.setAttribute("class", "fontSize");
      document.getElementsByTagName("body")[0].appendChild(div);
      let fontSizeDiv = document.getElementsByClassName("fontSize")[0];
      let fontSizeDivHeight = fontSizeDiv.offsetHeight;
      document.getElementsByTagName("body")[0].removeChild(fontSizeDiv);

      return fontSizeDivHeight;
    },