Vue Js Внедрение Вертикально-упорядоченной кладки с помощью flexbox - PullRequest
Новая
       57

Vue Js Внедрение Вертикально-упорядоченной кладки с помощью flexbox

0 голосов
/ 24 апреля 2020

Я пишу vue компонент для создания макета кладки с css flexbox.

Вот мои логи макета c

  public layout(): void {
    // Dynamic masonry algorithm
    let masonryElem = <any>this.$refs.masonry;
    let columnsElem = <any>Array.from(masonryElem.children);
    let defaultSlots = this.$slots.default || [];
    let shortestColumn = <any>null;
    let imgCount = masonryElem.getElementsByTagName("img").length;
    let imgCompletedCount = 0;
    this.imagesLoaded(masonryElem, (complete, index) => {
      if (complete) imgCompletedCount++;
      if (imgCount === imgCompletedCount) {
        masonryElem.children.forEach(children => {
          while (children.lastChild) {
            children.removeChild(children.lastChild);
          }
        });
        defaultSlots.forEach(children => {
          shortestColumn = columnsElem.reduce((prev, cur) => {
            return prev.clientHeight <= cur.clientHeight ? prev : cur;
          });
          shortestColumn.appendChild(children.elm);
        });
        this.$emit("isRendered", true);
      }
    });
  }

Поскольку изображение занимает некоторое При загрузке я написал функцию обратного вызова изображения, которая сообщает мне, что все изображения должны быть загружены до вычисления высоты всех столбцов.

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

Однако я должен удалить все дочерние элементы столбцов кладки, иначе он будет продолжать добавляться к дочерним элементам столбцов при обновлении слота.

Существуют ли более эффективные способы реализации без Удаляя детей, которые были размещены, пожалуйста, оставьте свой отзыв, заранее спасибо.

Это компонентная ссылка github, https://github.com/liho98/vue-dynamic-masonry/blob/master/src/components/Masonry.vue

Результат: masonry

...