《明日方舟》幹員列表實現

各位朋友們！W 的活動快要結束了，各位抽到了嗎？剛剛又來了一次十連，又歪了，感受跟 W 要無緣了😭。 此次分享一個佈局小技巧，在網頁中實現元素的橫向排版。

@ARKNIGHTS

這是《明日方舟》的幹員列表頁面。

仔細觀察一下，會發現元素排版從上倒下，若是空間不夠，會擠到第二列。

而正常的元素排版是從左到右，若是空間不夠，會擠到第二行。

再來個圖演示一下效果。

雖然在平時開發中不多會遇到，可是仍是有的，好比 bilibili 的菜單。

橫向排版代碼實現

+

ARKNIGHTS

提早聲明

另外本次寫 html 用的 pug，不清楚 pug 怎麼使用的同窗看這裏:

READ MORE+

1、實現佈局

1. 限制父元素高度。
2. flex 佈局。

// html pug
- var n = 1;
ul
 while n <= 21
  li= n++
複製代碼

而後加上一點點樣式

// less
html,
body {
 width: 100%;
 height: 100vh;
 background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
 overflow: auto;
}

ul {
 padding: 0 30px;
 height: 100%;
 display: flex;
 flex-wrap: wrap;
 flex-direction: column;
}

li {
 width: 200px;
 height: 300px;
 margin: 30px;
 border: 1px solid #fff;
 color: #fff;
 background-color: rgba(0, 0, 0, .5);
 display: flex;
 font-size: 40px;
 justify-content: center;
 align-items: center;
}

複製代碼

代碼地址： READ MORE+

2、空元素佔位

上面的例子，滾動到最後，就會發現這樣子。

父元素的以及子元素的padding-right、margin-right 都丟失了。

那麼解決辦法有好幾種，這裏用一種比較實用的一種，利用空白元素來撐開這個空間。

這裏一列有兩個元素，那麼就塞兩個空白元素就行了。

// html pug
- var n = 1;
ul
 while n <= 21
  li= n++
 li.empty
 li.empty
複製代碼

// less
.empty {
  width: 30px;
  background-color: unset; // 去掉背景
  border: none; // 去掉邊框
  point-event: none; // 去掉觸發事件
  animation: unset; // 去掉動畫，若是有
}
複製代碼

CodePen：READ MORE+

豎向滾動轉橫向滾動

若是是用觸控板的話，那麼能夠很舒服的雙指橫軸滾動。

但大多數同窗用的仍是鼠標。

其實在 web 中不多有橫向去滾動，那麼若是要去作兼容的話，只能去模擬。

我想到方式有兩種：

• ◆
  模擬移動端拖拽（本次不實現）
• ◆
  鼠標豎軸滾動轉橫軸滾動

若是要轉橫向滾動，須要作的有 3 步：

1. 監聽鼠標滾輪事件
2. 斷定是不是豎軸滾動
3. 改變滾動元素的 scrollLeft

代碼很簡單，就只有幾行。

document.body.onmousewheel = (e) => {
    let step = 50
    if (
      e.deltaY !== 0
      && Math.abs(e.deltaY) > Math.abs(e.deltaX)
    ) {
      document.body.scrollLeft += e.deltaY < 0 ? -step : step
    }
}
複製代碼

代碼地址：READ MORE+

總結

+

ARKNIGHTS

1. 使用 flex 作橫向佈局。
2. 使用空白元素撐開末尾空間。
3. 監聽鼠標滾輪事件模擬豎軸滾動轉橫軸滾動。

注意點有：

1. 父子元素都須要肯定高度。
2. 超過一屏幕會丟失右邊距。

最後

+

ARKNIGHTS

以往文章

《明日方舟》簽到效果實現：READ MORE+

《明日方舟》前端界面復刻: READ MORE+

頁面效果

CodePen：READ MORE+

Arknight React: READ MORE+