响应式布局的一种实现方案,宽度不一样放置元素数量不一样

Posted 2021-09-15 落叶飘飘

宽度不一样放置元素数量不一样

要求:

1. 小于某一宽度(1366)放置3个,大于某一宽度(1366)放置4个
2. 放置3个项目或4个项目时每个项目大小一致
3. 所有项目居中展示

实现步骤

• 写出页面骨架及样式
• 窗口变化时获取页面宽度,不同宽度做不同调整
• 使用css变量,js控制css变量

    <p>屏幕宽度低于1366显示3个<br>其他显示4个,也可通过点击按钮控制数量</p>
    <button onclick="handleClick(3,\'wrapperId\')">设为3个</button>
    <button onclick="handleClick(4,\'wrapperId\')">设为4个</button>
    <div class="item2-wrapper" id="wrapperId">
      <ul class="item-ul-2">
        <li class="item-li-2">1</li>
        <li class="item-li-2">2</li>
        <li class="item-li-2">3</li>
        <li class="item-li-2">4</li>
        <li class="item-li-2">5</li>
        <li class="item-li-2"></li>
      </ul>
    </div>

      body {
        min-width: 1024px;
      }
      .item2-wrapper {
        /* 元素数量 */
        --count_number: 4;
        /* 每个元素宽度 */
        --width: 200px;
        /* 每个元素的高度 */
        --height: 200px;
        /* 列间距 */
        --col-gap: 20px;
        /* 行间距 */
        --row-gap: 20px;
        /* 容器元素居中 */
        margin: 0 auto;
        /* 容器元素宽度,元素宽度*数量+列间距*(数量-1) */
        width: calc(
          var(--width) * var(--count_number) + var(--col-gap) *
            (var(--count_number) - 1)
        );
        background-color: antiquewhite;
      }
      .item-ul-2 {
        list-style-type: none;
        -webkit-padding-start: 0;
        /* 解决html未连续写导致浏览器渲染出间隙问题 */
        font-size: 0;
        /* 补充第一行和最后一行的上下边距 */
        padding: calc(var(--row-gap) / 2) 0;
        /* 宽度为宽度*数量+列间距*数量 */
        width: calc(
          var(--width) * var(--count_number) + var(--col-gap) *
            var(--count_number)
        );
        /* 调整ul容器位置,使其居中 */
        margin: 0 calc(var(--col-gap) / 2 * -1);
      }
      .item-li-2 {
        width: var(--width);
        height: var(--height);
        /* 设置元素上下左右间距 */
        margin: calc(var(--row-gap) / 2) calc(var(--col-gap) / 2);
        font-size: 14px;
        background-color: #00ffff33;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        /* 设置对齐位置 可先注释掉该行查看效果 */
        vertical-align: middle;
      }

      function handleClick(number, elementId) {
        var currentStyle = document.getElementById(elementId)
        // 这里取到的值为字符串格式
        var currentNumber = currentStyle.style.getPropertyValue(
          \'--count_number\'
        )
        if (currentNumber !== number + \'\') {
          currentStyle.style.setProperty(\'--count_number\', number)
        }
      }
      // 可添加节流(N毫秒内执行一次)或者防抖(事件停止N毫秒后执行)减少触发次数
      window.onresize = function () {
        //   获取可视区域宽度
        var width = document.documentElement.clientWidth
        if (width < 1366) {
          handleClick(3, \'wrapperId\')
        } else {
          handleClick(4, \'wrapperId\')
        }
      }

线上例子