首页 > 其他分享 >前端必须学会的vueh5布局瀑布流 简易通俗易懂 左右排版

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

时间：2023-04-23 11:04:30浏览次数：48  
标签：vueh5 border 100% 通俗易懂 height width 名字 排版 500

css简易版瀑布流布局

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

通过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>

标签：vueh5,border,100%,通俗易懂,height,width,名字,排版,500
From： https://blog.51cto.com/u_16059629/6216857

相关文章

  • 正确使用 51CTO博客—Markdown 的排版事例
    这是一篇关于讲解如何正确使用51CTO博客-Markdown的排版示例，希望通过此，大家都能轻松上手，都能通过Markdown能够让自己的文章有更加出色、更清晰明了的排版。什么是MarkdownMarkdown(MD)是现在普遍使用的一种文档书写语言格式，只需用一些非常简单易记的符号，如（#*/>[]()\），......
  • 04-HTML标签：排版标签
    title:04-HTML标签：排版标签publish:true本文主要内容排版标签：<h1><p><hr/><br/><div><span><center><pre>下面来详细介绍一下排版标签。标题标签标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题......
  • 数学建模论文排版
    本文为学习清风数学建模排版部分的笔记配套资料可以在微信公众号《数学建模学习交流》后台发送“论文排版”免费获取。Word基础开启两个功能显示/隐藏编辑标记   打印预览功能快捷键 insert键F4键（重复上一步操作）Ctrl类快捷键Ctrl+Enter分页符（用的很多，分割页面时......
  • 网页支持传统蒙古文排版样式HTML+CSS
    传统蒙古文排版跟大部分文字排版不一致，需要从上到下书写，然后从左到右的排版。样式文件如下：.vertical-text{-webkit-writing-mode:vertical-lr;-moz-writing-mode:vertical-lr;-o-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr;text-o......
  • 论文小助手排版建议
    排版建议注：该排版建议中全部都是论文内容上的建议。只要内容都符合条件，那么格式上的自动校正效果就会大大提高。1内容定位该系统会根据内容，辅助格式排版。若内容有误，可能导致排版错误。例如：系统会根据第一章的标题”第1章绪论“或”第1章引言“去定位章节起始位置。......
  • 图解 SQL 执行顺序，通俗易懂！
    ​这是一条标准的查询语句:这是我们实际上SQL执行顺序：我们先执行from,join来确定表之间的连接关系，得到初步的数据where对数据进行普通的初步的筛选groupby分组各组分别执行having中的普通筛选或者聚合函数筛选。然后把再根据我们要的数据进行select，可以是普通字段查询也......
  • BI数据可视化|排版混乱、无重点怎么办？
    BI数据可视化报表往往需要容纳大量的数据信息，为决策提供丰富详尽的数据支持。但也这引发另一个问题，那就是BI数据可视化报表的排版布局。BI数据可视化报表要将大量的数据信息......
  • Word论文排版
    Word论文排版页面布局--页面设置，设置页面边距按要求设置正文的文字格式和段落格式设置论文封面设置论文摘要设置一级、二级、三级标题样式，并应用，ctrl+f查看导航标题......
  • 纯 CSS 实现瀑布流式排版
    最近写了个页面，想到了用瀑布流实现页面布局。在我看来一个合格的横向瀑布流式布局包含以下几个条件：1、每个内容块高度可以不等，但宽度相等。由于内容的不确定性，内容块......
  • Markdown文档排版必须掌握的技巧: 消除MD033错误
    Markdown文档排版必须掌握的技巧:消除MD033错误Markdown的排版问题一直是技术人的痛点，而MD033错误更是让人头疼不已。本文分享了解决MD033错误的技巧和注意事项，帮你写出......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99