仿明日方舟网页html,《明日方舟》干员列表实现
各位朋友們！W 的活動快要結(jié)束了，各位抽到了嗎？剛剛又來了一次十連，又歪了，感覺跟 W 要無緣了😭。
這次分享一個布局小技巧，在網(wǎng)頁中實(shí)現(xiàn)元素的橫向排版。
@ARKNIGHTS
這是《明日方舟》的干員列表頁面。
仔細(xì)觀察一下，會發(fā)現(xiàn)元素排版從上倒下，如果空間不夠，會擠到第二列。
而正常的元素排版是從左到右，如果空間不夠，會擠到第二行。
再來個圖演示一下效果。
雖然在平時開發(fā)中很少會遇到，但是還是有的，比如 bilibili 的菜單。
橫向排版代碼實(shí)現(xiàn)
+
ARKNIGHTS
提前聲明
另外本次寫 html 用的 pug，不清楚 pug 怎么使用的同學(xué)看這里:
一、實(shí)現(xiàn)布局
限制父元素高度。
flex 布局。
//?html?pug
-?var?n?=?1;
ul
while?n?<=?21
li=?n++復(fù)制代碼
然后加上一點(diǎn)點(diǎ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;
}
復(fù)制代碼
二、空元素占位
上面的例子，滾動到最后，就會發(fā)現(xiàn)這樣子。
父元素的以及子元素的padding-right、margin-right 都丟失了。
那么解決辦法有好幾種，這里用一種比較實(shí)用的一種，利用空白元素來撐開這個空間。
這里一列有兩個元素，那么就塞兩個空白元素就好了。
//?html?pug
-?var?n?=?1;
ul
while?n?<=?21
li=?n++
li.empty
li.empty復(fù)制代碼
//?less
.empty?{
width:?30px;
background-color:?unset;?//?去掉背景
border:?none;?//?去掉邊框
point-event:?none;?//?去掉觸發(fā)事件
animation:?unset;?//?去掉動畫，如果有
}
復(fù)制代碼
豎向滾動轉(zhuǎn)橫向滾動
如果是用觸控板的話，那么可以很舒服的雙指橫軸滾動。
但大多數(shù)同學(xué)用的還是鼠標(biāo)。
其實(shí)在 web 中很少有橫向去滾動，那么如果要去做兼容的話，只能去模擬。
我想到方式有兩種：
◆模擬移動端拖拽(本次不實(shí)現(xiàn))
◆鼠標(biāo)豎軸滾動轉(zhuǎn)橫軸滾動
如果要轉(zhuǎn)橫向滾動，需要做的有 3 步：
監(jiān)聽鼠標(biāo)滾輪事件
判定是否是豎軸滾動
改變滾動元素的 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?
}
}
復(fù)制代碼
總結(jié)
+
ARKNIGHTS
使用 flex 做橫向布局。
使用空白元素?fù)伍_末尾空間。
監(jiān)聽鼠標(biāo)滾輪事件模擬豎軸滾動轉(zhuǎn)橫軸滾動。
注意點(diǎn)有：
父子元素都需要確定高度。
超過一屏幕會丟失右邊距。
最后
+
ARKNIGHTS
以往文章
《明日方舟》簽到效果實(shí)現(xiàn)：READ MORE+
《明日方舟》前端界面復(fù)刻: READ MORE+
頁面效果
Arknight React: READ MORE+
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的仿明日方舟网页html,《明日方舟》干员列表实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html社交模板,Olympus – 社
- 下一篇： angularjs html编辑器,An