主页 / 问题 / 999529
Accepted
Lyy
Asked:2020-07-05 04:37:58 +0000 UTC2020-07-05 04:37:58 +0000 UTC

当一个块溢出内容时，如何将“剩余”转移到另一个块？

  • 772

考虑到块的宽度是橡胶，高度是固定的，将如何进行转移以及在条件下写什么？

我想出了一个小项目，只是为了学习不同的东西，但在这一点上卡住了。请给出它应该如何工作的想法或建议阅读/查看该主题的内容？！

在此处输入图像描述 

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  border: 3px solid #757575;
  width: 80%;
  height: 300px;

  list-style: none;
}

.list__item {
  border: 1px solid #bdbdbd;
  margin: 10px;
  min-width: 80px;
  text-align: center;
}

.btn {
  border: none;
  background-color: transparent;
  font-size: 90px;
  cursor: pointer;
  outline: none;
  color: #bdbdbd;
}
<body>
    <div class="container">
      <button class="btn">◀</button>
      <ul class="list">
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
        <li class="list__item">qwerty</li>
      </ul>
      <button class="btn">▶</button>
    </div>
  </body>

javascript

2 个回答

  1. Best Answer

    作为一个开始的例子：

    // CSS класс активного слайда.
const CSS_ACTIVE = 'active';

// Выбираем через метод `getElementsByClassName`, так как
// нам нужна живая коллекция элементов (live `HTMLCollection`).
const SLIDES = document.getElementsByClassName('list');

// Выбираем кнопки: вперед и назад.
const BTN_PREV = document.querySelector('.btn-prev');
const BTN_NEXT = document.querySelector('.btn-next');

// Добавляем обработчиков событий для кнопок.
BTN_NEXT.addEventListener('click', changeSlide);
BTN_PREV.addEventListener('click', changeSlide);

// Подготавливаем слайды к показу, передав исходный список.
prepareSlides(...SLIDES);

// Подготовить слайды.
function prepareSlides(parent) {
  // Классы родителя, которые необходимо
  // добавить ко всем созданным слайдам,
  // исключая класс активного слайда `active`.
  const className = parent.className.replace(CSS_ACTIVE, '');
  const tagName = parent.tagName;

  // Выбираем коллекцию `HTMLCollection` дочерних элементов.
  const items = [...parent.children];

  // Определяем индекс первого элемента,
  // видимость которого ограничена пределами родительского контейнера.
  // Это будет количество элементов, отображаемых в одном слайде.
  const perPage = items.findIndex((item) => !isFullyVisibleByHeight(parent, item));

  // Количество слайдов.
  let pageСount = perPage > -1 ? Math.ceil(items.length / perPage) : 1;

  while (pageСount--) {
    // Создаем новый контейнер.
    const container = document.createElement(tagName);

    // Добавляем классы родителя.
    container.className = className;

    // Делаем срез элементов и перемещаем их
    // во вновь созданный контейнер.
    items.splice(0, perPage).forEach((item) => container.appendChild(item));

    // Добавляем к существующему DOM.
    parent.parentNode.insertBefore(container, parent);
  }

  // Удаляем исходный список из DOM. Ничего лучше даже не думал.
  parent.remove();

  // Обращаемся к нашей живой коллекции и показываем первый слайд.
  SLIDES[0].classList.add('active');
}

function changeSlide(event) {
  // "Распаковываем" коллекцию слайдов в массив.
  const slides = [...SLIDES];

  // Индекс текущего активного слайда в массиве слайдов.
  const currentIndex = slides.findIndex((item) => item.classList.contains(CSS_ACTIVE));

  // Удаляем сразу класс у активного слайда.
  SLIDES[currentIndex].classList.remove(CSS_ACTIVE);

  // Индекс нового активного слайда в массиве слайдов.
  const activeIndex = this === BTN_PREV ? currentIndex - 1 : currentIndex + 1;

  // slides.length - количество слайдов.
  // a % b – это остаток от деления a на b.
  // Если вышли за пределы длины массива, то есть получили `-1`,
  // то метод `slice` вернет массив, состоящий из последнего элемента.
  const [active] = slides.slice(activeIndex % slides.length);

  // Естественно, добавляем класс новому активному слайду.
  active.classList.add(CSS_ACTIVE);
}

// Элемент полностью виден в пределах элемента-родителя.
// NB@: учитывается только высота элементов.
//     Для динамического отслеживания
//     лучше использовать IntersectionObserver API.
function isFullyVisibleByHeight(parent, child) {
  function getCoords(elem) {
    const {
      x,
      y,
      width,
      height
    } = elem.getBoundingClientRect();

    return {
      xw: x + width,
      yh: y + height
    }
  }

  return getCoords(child).yh < getCoords(parent).yh;

  // Либо так:
  // return child.offsetTop + child.offsetHeight < parent.offsetTop + parent.offsetHeight;
}
    /**
 * Добавленные стили расположены внизу таблицы.
 */

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  border: 3px solid #757575;
  width: 80%;
  height: 300px;
  list-style: none;
}

.list__item {
  border: 1px solid #bdbdbd;
  margin: 10px;
  min-width: 80px;
  text-align: center;
}

.btn {
  border: none;
  background-color: transparent;
  font-size: 90px;
  cursor: pointer;
  outline: none;
  color: #bdbdbd;
}


/**
 * ДОБАВЛЕННЫЕ СТИЛИ.
 */

*,
*::after,
*::before {
  box-sizing: border-box;
}

.btn {
  color: #28ae4f;
}

.list {
  width: 600px;
  display: none;
}

.list.active {
  display: flex;
}

.list__item {
  border: 2px solid #ed8336;
  /**
   * Закомментируйте строки ниже и
   * количество слайдов сократится.
   */
  width: calc(50% - 24px);
  padding: 8px;
}
    <div id="app" class="container">
  <button class="btn btn-prev">&laquo;</button>
  <ul class="list active">
    <li class="list__item">Блок 0</li>
    <li class="list__item">Блок 1</li>
    <li class="list__item">Блок 2</li>
    <li class="list__item">Блок 3</li>
    <li class="list__item">Блок 4</li>
    <li class="list__item">Блок 5</li>
    <li class="list__item">Блок 6</li>
    <li class="list__item">Блок 7</li>
    <li class="list__item">Блок 8</li>
    <li class="list__item">Блок 9</li>
    <li class="list__item">Блок 10</li>
    <li class="list__item">Блок 11</li>
    <li class="list__item">Блок 12</li>
    <li class="list__item">Блок 13</li>
    <li class="list__item">Блок 14</li>
    <li class="list__item">Блок 15</li>
    <li class="list__item">Блок 16</li>
    <li class="list__item">Блок 17</li>
    <li class="list__item">Блок 18</li>
    <li class="list__item">Блок 19</li>
    <li class="list__item">Блок 20</li>
    <li class="list__item">Блок 21</li>
    <li class="list__item">Блок 22</li>
    <li class="list__item">Блок 23</li>
    <li class="list__item">Блок 24</li>
    <li class="list__item">Блок 25</li>
    <li class="list__item">Блок 26</li>
    <li class="list__item">Блок 27</li>
    <li class="list__item">Блок 28</li>
    <li class="list__item">Блок 29</li>
    <li class="list__item">Блок 30</li>
    <li class="list__item">Блок 31</li>
    <li class="list__item">Блок 32</li>
    <li class="list__item">Блок 33</li>
    <li class="list__item">Блок 34</li>
    <li class="list__item">Блок 35</li>
    <li class="list__item">Блок 36</li>
    <li class="list__item">Блок 37</li>
    <li class="list__item">Блок 38</li>
    <li class="list__item">Блок 39</li>
    <li class="list__item">Блок 40</li>
    <li class="list__item">Блок 41</li>
    <li class="list__item">Блок 42</li>
    <li class="list__item">Блок 43</li>
    <li class="list__item">Блок 44</li>
    <li class="list__item">Блок 45</li>
    <li class="list__item">Блок 46</li>
    <li class="list__item">Блок 47</li>
    <li class="list__item">Блок 48</li>
  </ul>
  <button class="btn btn-next">&raquo;</button>
</div>

    • 2

  2. 这是列：

    .container {
  outline: 1px dotted gray;
  height: 200px;
  -moz-column-width: 12em;
  column-width: 12em;
  -moz-column-fill: auto;
  column-fill: auto;
  overflow-x: auto;
}

h2, p {
  page-break-inside: avoid;
  break-inside: avoid;
  margin: .25em 0;
  border: 1px solid;
}

h2 {
  background: silver;
}

.container > :first-child {
  margin-top: 0;
}
    <div class="container">
  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo.</p>
  <p>In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per.</p>
  <p>Quo ei novum utroque, ius ex graecis volutpat quaerendum!</p>
  <p>Ea assum erroribus accommodare pri, simul omnesque scaevola has cu, an putant tacimates ius.</p>
  <p>Ius soluta nonumes ei?</p>
  <p>Ex modus eligendi repudiandae ius, nec cu quem delicatissimi.</p>

  <h2>AAA</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p>Aspernatur, explicabo.</p>

  <h2>Dolor sit</h2>
  <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo.</p>
  <p>In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per.</p>
  <p>Quo ei novum utroque, ius ex graecis volutpat quaerendum!</p>

  <h2>BBB</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>

  <h2>CCC</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>

    • 1

相关问题