《明日方舟》干员列表实现

各位朋友们！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+