Реализация списка операторов «Завтрашнего ковчега»

CSS
Реализация списка операторов «Завтрашнего ковчега»

Друзья!WСобытие подходит к концу, вы нарисовали? Он только что пришел снова десять раз подряд, и он снова был кривым, и это было похоже на то,WБудет не хватать 😭. Поделись на этот разСоветы по макету, чтобы реализовать горизонтальное расположение элементов на веб-странице.

Это страница со списком операторов "Tomorrow's Ark".

Кодовый адрес:READ MORE+

Внимательно наблюдайте, обнаружит, что типографика элемента будет падать сверху, если места не хватит, то сожмется до второго столбца.

Нормальные элементы располагаются слева направо, если места недостаточно, они будут перемещены на вторую строку.

Еще одна картинка для демонстрации эффекта.

Хотя в нормальном развитии встречается редко, но все же некоторые есть, например меню билибили.

Реализация кода горизонтальной компоновки

авансовый отчет

Кроме того, студенты, которые не знают, как использовать pug для написания html на этот раз, могут посмотреть здесь:

READ MORE+

Во-первых, реализация макета

  1. Ограничить высоту родительского элемента.
  2. гибкий макет.
// 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; // 去掉动画，如果有
}

КодПен:READ MORE+

Вертикальная прокрутка к горизонтальной прокрутке

Если вы используете трекпад, вы можете прокручивать двумя пальцами.

Но большинство студентов по-прежнему используют мышь.

На самом деле в вебе очень мало горизонтальной прокрутки, поэтому если вы хотите сделать совместимость, вы можете только имитировать ее.

Я могу думать о двух способах:

  • Имитировать мобильное перетаскивание (на этот раз не реализовано)
  • Прокрутка вертикальной оси мыши до прокрутки горизонтальной оси

Если вы хотите включить горизонтальную прокрутку, вам нужно сделать 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+

Суммировать

  1. Используйте flex для горизонтальной компоновки.
  2. Используйте пустые элементы, чтобы открыть завершающее пространство.
  3. Прослушивайте события колесика мыши, чтобы имитировать прокрутку вертикальной и горизонтальной осей.

Следует отметить:

  1. И родительский, и дочерний элементы должны определять высоту.
  2. Более одного экрана потеряет правое поле.

наконец

прошлые статьи

Реализован эффект авторизации «Завтрашнего ковчега»:READ MORE+

Регравировка внешнего интерфейса "Tomorrow's Ark":READ MORE+

эффект страницы

КодПен:READ MORE+

Arknight React: READ MORE+

Категории