前端必须学会的vueh5布局瀑布流 简易通俗易懂 左右排版

TT_哲哲
575 阅读3分钟

css简易版瀑布流布局

image.png

通过v-if="index % 2 === 0" v-if="index % 2 === 1" 进行判断显示左边右边

 左右瀑布流排版，在每一列中交替地排放元素。具体来说，可以通过对每一列进行编号，然后对奇数列和偶数列分别设置不同的样式来实现左右瀑布流排版。

html

<div>
<cl-pull-refresh v-model="isRefresh" @refresh="onRefresh">
  <div class="index-modulea">
    <cl-list
      v-model="loading"
      @load="loadData"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多内容啦"
      class="client-group" >
      <!-- 内容 -->
      <template>
        <div class="index-module">
          <div class="modulee-content-2">
            <div>
              <v-nodata v-if="isFirst && dataList.length == 0"></v-nodata>
            </div>
            <div class="content-list">
              <!-- 渲染 -->
              <div v-if="dataList.length > 0">
                <div
                  class="aaa"
                  v-for="(item, index) in dataList"
                  :key="item.id"
                  v-if="index % 2 === 0"
                >
                  <div class="list-item">
                    <div class="img">
                      <div>
                        <img
                          class="big_img"
                          :src="item.src"
                          @click="toDetail(lineDataList, index)"
                        />
                        <div class="vr_img">
                          <img
                            class="small_img"
                            src="/img/index/video.png"
                          />
                        </div>
                        <div class="vr_title">名字名字名字</div>
                      </div>
                      <div class="words">
                        <div class="title">{{ item.title }}{{index}}</div>
                        
                        <div class="click_number">
                          <div class="left">
                            <div class="headpic">
                              <img
                                v-for="(user, idx) in item.checkUserList"
                                :key="user.id"
                                :src="user.src"
                                v-if="idx < 3"
                              />
                              <div
                                class="more"
                                v-if="item.checkUserList.length > 2"
                              >
                                ···
                              </div>
                            </div>
                          </div>
                          <div class="right">
                            <span class="distance">
                              <cl-icon size="20" name="eye-o" />
                              <span>{{ item.num }}</span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="aaa"
                  v-for="(item, index) in dataList"
                  :key="item.id"
                  v-if="index % 2 === 1"
                >
                  <div class="list-item">
                    <div class="img">
                      <div>
                        <img
                          class="big_img"
                          :src="item.src"
                          @click="toDetail(lineDataList, index)"
                        />
                        <div class="vr_img">
                          <img
                            class="small_img"
                            src="/img/index/video.png"
                          />
                        </div>
                        <div class="vr_title">名字名字名字</div>
                      </div>
                      <div class="words">
                        <div class="title">{{ item.title }}{{index}}</div>
                        
                        <div class="click_number">
                          <div class="left">
                            <div class="headpic">
                              <img
                                v-for="(user, idx) in item.checkUserList"
                                :key="user.id"
                                :src="user.src"
                                v-if="idx < 3"
                              />
                              <div
                                class="more"
                                v-if="item.checkUserList.length > 2"
                              >
                                ···
                              </div>
                            </div>
                          </div>
                          <div class="right">
                            <span class="distance">
                              <cl-icon size="20" name="eye-o" />
                              <span>{{ item.num }}</span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <div slot="loading"></div>
    </cl-list>
  </div>
</cl-pull-refresh>

css

 .index-modulea {
  width: 750px;
  margin-bottom: 50px;
  position: relative;
  .modulee-content-2 {
    padding: 20px 20px 0;
    padding-bottom: 110px;
    .content-list {
      // 列与列间的间隙
      column-gap: 10px;
      // 分割的列数
      column-count: 2;
      .aaa {
        // page-break-inside: avoid;
        // break-inside: avoid;
        margin-bottom: 30px;

        .list-item {
          display: inline-block;
          position: relative;
          z-index: 1;
          border-radius: 20px;
          padding: 5px;
          box-sizing: border-box;
          // 间距控制
          width: 100%;

          &::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            bottom: 0px;
            background-image: url("/img/index/kuangjia.png");
            background-size: 100% 100%;
            z-index: -1;
          }

          .img {
            width: 100%;
            height: 100%;
            div {
              position: relative;
              .big_img {
                width: 100%;
                display: block;
                border-radius: 20px 20px 0 0;
              }
              .vr_img {
                width: 45px;
                height: 45px;
                position: absolute;
                top: 18px;
                right: 18px;
                .small_img {
                  width: 100%;
                  height: 100%;
                }
              }
              .vr_title {
                position: absolute;
                left: 12px;
                bottom: 20px;
                padding: 0px 6px;

                background: #FFA928;
                border-radius: 8px;
                opacity: 0.8;
                backdrop-filter: blur(10px);

                text-align: center;
                letter-spacing: 1px;
                font-size: 24px;
                font-weight: 400;
                color: #ffffff;
              }
            }
            .words {
              padding: 16px 14px 0;
              .title {
                font-size: 32px;
                margin-bottom: 30px;
              }
              .words_img {
                width: 240px;
                height: 100px;
                margin: auto;
                margin-bottom: 30px;
                position: relative;
                img {
                  width: 100%;
                  height: 100%;
                }
                div {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  left: 0;
                  top: 0;
                  background-color: rgba(0, 0, 0, 0.2);

                  text-align: center;
                  line-height: 100px;

                  font-size: 20px;
                  font-weight: 400;
                  color: #ffffff;
                }
              }
              .words_swipe {
                .van-swipe-item {
                  display: flex;
                  justify-content: space-around;
                  height: 130px;
                }
                .pic {
                  width: 144px;
                  height: 100px;
                  position: relative;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                  div {
                    width: 144px;
                    height: 100px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-color: rgba(0, 0, 0, 0.2);
                    color: #fff;
                    font-size: 20px;

                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                  }
                }
                .van-swipe__indicators {
                  bottom: 10px;
                  position: absolute;
                  left: 50%;
                }
                .van-swipe__indicator {
                  width: 20px;
                  height: 4px;
                  border-radius: 0;
                  background-color: #ededed;
                  border-radius: 3px;
                }
                .van-swipe__indicator--active {
                  background-color: #fda82c;
                  opacity: 1;
                  border-radius: 3px;
                }
                .van-swipe__indicator:not(:last-child) {
                  margin-right: 0;
                }
              }
              .click_number {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20px;
                .left {
                  display: flex;
                  justify-content: space-between;
                  .headpic {
                    width: 48px;
                    height: 48px;
                    display: flex;
                    flex-direction: row;
                    align-items: flex-start;
                    box-sizing: border-box;
                    img {
                      margin-right: -30px;
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                      border: 2px solid #ffffff;
                      box-sizing: border-box;
                      z-index: 10;
                    }

                    .more {
                      box-sizing: border-box;
                      position: absolute;
                      display: inline-block;
                      width: 100%;
                      height: 100%;
                      background-color: #cfcfcf;
                      border-radius: 50%;
                      border: 2px solid #ffffff;
                      left: 55px;

                      text-align: center;
                      line-height: 48px;
                      color: #fff;
                      font-size: 40px;
                      z-index: 100;
                    }
                    // 如果more 等于 0
                    .more_0 {
                      box-sizing: border-box;
                      width: 100%;
                      height: 100%;
                      background-color: #cfcfcf;
                      border-radius: 50%;
                      border: 2px solid #ffffff;

                      text-align: center;
                      line-height: 48px;
                      color: #fff;
                      font-size: 40px;
                    }
                  }
                  .headnumber {
                    font-size: 24px;
                    font-weight: 400;
                    color: #666666;
                    line-height: 48px;
                  }
                }
                .right {
                  .distance {
                    color: #666;
                    font-size: 32px;
                    z-index: 2;
                    text-align: center;
                    // text-shadow: 1px 1px 4px #666;

                    .van-icon {
                      vertical-align: middle;
                      margin-right: 8px;
                    }
                    span {
                      vertical-align: middle;
                      font-size: 24px;
                      font-weight: 400;
                      color: #666666;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

js

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      isRefresh: false, // 是否处于下拉刷新状态
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      dataList: [
        {id:1,num:10,src:'https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',title:'名字名字名字名字名字名字',checkUserList:[{id:5,src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},{src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},]},
        {id:3,num:10,src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',title:'名字名字名字名字名字名字',checkUserList:[{id:7,src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},{src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},]},
        {id:3,num:10,src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',title:'名字名字名字名字名字名字',checkUserList:[{id:7,src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},{src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},]},
        {id:4,num:10,src:'https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',title:'名字名字名字名字名字名字',checkUserList:[{id:8,src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},{src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},]},
        ],
      isFirst: true,
    }
  },
  computed: {
    ...mapState(["userInfo", "dicts", "coordinate"]),
  },
  methods: {
    async onRefresh() {
      this.isFirst = false;
      this.dataList = [];
      // this.page = 0;
      // this.total = 0;
      this.loading = false;
     this.loadData()
      this.finished = false;
    },
    loadData(){
      this.loading = true;
      this.isFirst = true;
      this.dataList = [{id:1,num:10,src:'https://img1.baidu.com/it/u=847956157,2750448390&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',title:'名字名字名字名字名字名字',checkUserList:[{id:5,src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},{src:'https://img0.baidu.com/it/u=1243684681,1845170333&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'},]},]
      this.isFirst = false;
      this.loadEnd();
    },
    loadEnd() {
      this.loading = false;
      this.isRefresh = false;
    },
  },
}
</script>
avatar
文章
阅读
粉丝