vue项目里的简易的网格样式

最新推荐文章于 2023-05-16 11:47:24 发布

qq_30975339

最新推荐文章于 2023-05-16 11:47:24 发布

阅读量900

点赞数

分类专栏： vue CSS 文章标签： vue.js css

本文链接：https://blog.csdn.net/qq_30975339/article/details/113113095

版权

CSS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

效果：

原理：

1.利用css的自定义变量以及var函数

2.css里0除以0的结果是null，而且css运算式中只要出现null的结果就一定是null

缺点：

1.给定网格之间的间隙大小=m时，头尾的网格和中间的网格尺寸差1/4m（如果等分数为3，那么会差1/2m）

2.本人是在vue项目里使用，很方便，当然我还是更推荐使用第三方网格插件

3.兼容性未知

CSS：

<!-- 父元素 -->
.qiuGrid {
	position: relative;
    <!-- 父元素默认3行3列，间隔15px，通过style属性修改 -->
	--num-w: 3;
	--num-h: 3;
	--pad-around: 15px;
}
<!-- 子元素 -->
.qiuGrid .grid-each {
    <!-- 改子元素占用的左上点和右下点位置 -->
	--pos1-x: 0;
	--pos1-y: 0;
	--pos2-x: 1;
	--pos2-y: 0;
	position: absolute;
	left: calc(100% / var(--num-w) * var(--pos1-x));
	top: calc(100% / var(--num-h) * var(--pos1-y));
	width: calc(100% / var(--num-w) * (var(--pos2-x) - var(--pos1-x) + 1));
	height: calc(100% / var(--num-h) * (var(--pos2-y) - var(--pos1-y) + 1));
	box-sizing: border-box;
	padding-left: calc((var(--pos1-x) / var(--pos1-x)) * (var(--pad-around) / 2));
	padding-top: calc((var(--pos1-y) / var(--pos1-y)) * (var(--pad-around) / 2));
	padding-right: calc(((var(--num-w) - 1 - var(--pos2-x)) / (var(--num-w) - 1 - var(--pos2-x))) * (var(--pad-around) / 2));
	padding-bottom: calc(((var(--num-h) - 1 - var(--pos2-y)) / (var(--num-h) - 1 - var(--pos2-y))) * (var(--pad-around) / 2));
}

使用例子：

下面的代码关心带qiuGrid的父元素和带grid-each的子元素就好了
顺嘴一提，下面这几个是为了在不同尺寸的电脑上不至于发生宽高比变化给的样式：
--ratio: 设置盒子宽高比
qiu-fix-ratio-shell：固定盒子宽高比的父盒子样式
qiu-fix-ratio-box：固定盒子宽高比的子盒子样式

<!-- 下面的代码关心带qiuGrid的父元素和带grid-each的子元素就好了 -->
<!-- 
    --ratio: 设置盒子宽高比
    qiu-fix-ratio-shell：固定盒子宽高比的父盒子样式
    qiu-fix-ratio-box：固定盒子宽高比的子盒子样式
 -->
<template>
  <div class="box">
    <div class="page-w">
      <div class="head">
        <Header></Header>
      </div>
      <div class="main">
        <div :style="{'--ratio': 2/5}" class="col qiu-fix-ratio-shell">
          <div class="qiu-fix-ratio-box">
            <div class="list qiuGrid" :style="displaySize">
              <div :style="setPosStyle(displayLine1)[0]" class="item grid-each classification">
                <div class="item-box">
                  <div class="classification-list no-scrollbar">
                    <div :class="{'active':activeIndex==index}" @click="activeIndex=index" v-for="(site,index) in classificationList" class="classification-item">{{site}}</div>
                  </div>
                </div>
              </div>
              <div v-if="activeIndex>=0" :style="setPosStyle(displayLine1)[n]" class="item grid-each" v-for="n in 5">
                <router-link tag="div" :to="{ name: 'ProductDetail' }" class="item-box">
                  <img class="image" src="../Home/image/test_product.png" alt="">
                </router-link>
              </div>
              <div v-if="activeIndex<0" :style="setPosStyle(displayLine1_adv)[1]" class="item grid-each">
                <router-link tag="div" :to="{ name: 'ProductDetail' }" class="item-box">
                  <img class="image" src="../Home/image/test_product.png" alt="">
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <div v-for="n in 3" :style="{'--ratio': 2/5}" class="col qiu-fix-ratio-shell">
          <div class="qiu-fix-ratio-box">
            <div class="list qiuGrid" :style="displaySize">
              <div :style="setPosStyle(displayLine2[n%2])[m-1]" class="item grid-each" v-for="m in 7">
                <router-link tag="div" :to="{ name: 'ProductDetail' }" class="item-box">
                  <img class="image" src="../Home/image/test_product.png" alt="">
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 邱的私用样式 -->
<style scoped src="@/assets/styles/qiu.css"></style>
<script>
  export default {
    data () {
      return {
        //网格划分
        displaySize: {
          '--num-w':5,
          '--num-h':2,
          '--pad-around': '30px'
        },
        //显示广告的布局
        displayLine1_adv: [
          [0,0,0,1],
          [1,0,4,1]
        ],
        //不显示广告的布局
        displayLine1: [
          [0,0,0,1],
          [1,0,1,0],
          [2,0,2,0],
          [1,1,1,1],
          [2,1,2,1],
          [3,0,4,1],
        ],
        //第二行开始的布局
        displayLine2: [
          [
            [0,0,0,0],
            [0,1,0,1],
            [1,0,1,0],
            [1,1,1,1],
            [2,0,2,0],
            [2,1,2,1],
            [3,0,4,1],
          ],
          [
            [0,0,1,1],
            [2,0,2,0],
            [2,1,2,1],
            [3,0,3,0],
            [4,0,4,0],
            [3,1,3,1],
            [4,1,4,1],
          ]
        ],
        //是否选中了分类
        classificationList: [
          "米食",
          "雜糧",
          "乾貨",
          "麵食",
          "飲品/沖泡",
          "休閒食品",
          "食材醬料",
          "茶",
          "低溫生鮮",
        ],
      }
    }
  }
</script>

<style lang="less" scoped>
.main {
  .col {
    margin-bottom: 30px;
    .list {
      width: 100%;
      height: 100%;
      .item-box {
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        .image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .classification {
        .item-box {
          border-radius: 3px;
          padding: 20px 0px;
          box-sizing: border-box;
          .classification-list {
            height: 100%;
            overflow: auto;
            .classification-item {
              padding: 0px 20px;
              font-size: 25px;
              line-height: 50px;
              color: #000;
              cursor: pointer;
              box-sizing: border-box;
            }
            .classification-item.active,.classification-item:hover {
              background-color: rgba(153,221,211,0.5);
            }
          }
        }
      }
    }
  }
}
</style>