響應式佈局的一種實現方案,寬度不同放置元素數量不同

寬度不同放置元素數量不同

要求:

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')
        }
      }

線上例子