[Vue / Reagir] cascata em vue (lógico, escalabilidade)

Questões a considerar

• Vue elemento de nó DOM adquirida
• Como pedir envolvendo dados de validação de dados chega novamente prestados nó DOM
• Envolvendo a prestação de carregamento da imagem, como ouvir DOM render completo go computação altura do elemento (Bug: se se trata de fotos carregadas na situação desagradável de rede, Vue de altura para obter o elemento atual contém a imagem não estiver correta, será afectar a disposição em cascata subsequente)
• Como conseguir isso é automaticamente calculada aparelho cascata de acordo com o tamanho do ecrã da largura do cartão, e é definida como a distância entre a distância a partir da margem do elemento de tela e o cartão e o cartão (Custom Development)
• Como é um posicionamento absoluto pelo layout do cartão (em cima, a propriedade à esquerda), então a altura cachoeira cascata com o aumento de como o cartão segurar automaticamente (altura calculada)

Este é o principal problema encontrado quando se utiliza uma cascata de desenvolvimento Vue, a lista aqui, provavelmente, não muito BB explicar um por um na solução de código

Análise e resolução

Em primeiro lugar, como é que vamos layout (HTML)

Definição:
layout correto (isto é, escrevendo HTML) é um pré-requisito para a realização de uma cachoeira, uma condenação de acordo com seu próprio projeto para

<template>
	<!-- 瀑布流容器 -->
	<div class="waterfull-container" :style="{height:waterFullBoxH + 'px'}">
		<!-- 瀑布流卡片列表 -->
		<div class="waterfull-card-list" v-for="item in waterFullList" :key="item.id" ref="waterFullItem">
			<!-- 瀑布流卡片单体 -->
			<div class="waterfull-card-item">
				...
			</div>
		</div>
	</div>
</template>

análise:

Do exposto, é fácil ver HTML trilogia

• Definir um recipiente espera toda a cascata de waterfull-container

  sócio minoritário cuidado vai encontrar aqui também define um atributos de estilo dinâmico, calculado de acordo com a altura máxima do cartão de altura cachoeira fluxo recipiente global que é colocado depois que será usado, follow-up vai ser falado

• Laço waterfull-card-listque se baseia em waterFullListdados cíclico

  Nós podemos ver que há um ref="waterFullItem"que é o problema listado acima: [] → Vue obter um elementos elemento de nó pode obter a informação que você quer this.refs.waterFullItem

• cartão da cachoeira waterfull-card-itemcomo um todo

  Aqui ele pode ser escrito de acordo com sua própria exibição layout do cartão, mas você quer saber todo o conteúdo do cartão devem ser todos colocados aqui, isso não afetará o cálculo elemento altura cartão posterior

Então como é que vamos escrever o estilo (CSS)

Definição:
De acordo com o projeto HTML, ser escrito no estilo correspondente, onde, além de waterfull-card-itemseu próprio projeto, o outro é escrito na linha fixa

.waterfull-container{
  position: relative;
  background: #fafafa;  /* 瀑布流容器背景色（自定） */
}
.waterfull-card-list{
  position: absolute;
}

Análise:
Sim é tão simples, podemos ver que na principal recipiente posicionamento relativo relativee posicionamento absoluto Cachoeira transmitir lista absolute, um pequeno parceiro de entender, eu sou cartão da cachoeira waterfull-card-itemassim que não definir a largura e altura? ?

Primeiro de tudo o que precisamos saber, cachoeira definimos a largura e altura não são codificados, a largura é a largura do dispositivo e quantas colunas você precisa definir a cachoeira foram calculados, ea cachoeira é a essência do fluxo, escusado será dizer, se alta fixo morto, em seguida, escreveu o cachoeira, e estes cálculos são atribuídos à parte de trás do Javascript ...

Finalmente, como podemos calcular (JavaScript)

Definição:
Nós primeiro calcular a lógica de gravação, então, gradualmente, resolver os problemas encontrados após, por exemplo, saber quando os dados chegou novamente processado, o segundo é quando chamar uma função para calcular uma série de problemas

Obtém a atual largura ea altura do funcionamento do dispositivo [] Geral:

Como mencionado anteriormente, a largura a ser calculado que cascata dispositivo único de acordo com a largura do cartão

_sizeWidth () {
      return {
        width:
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth,
        height:
          window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight
      }
    }

Usado para dados personalizados calcular pode ser expandida [Custom]:

  data () {
    return {
      imgCount: 20, // 瀑布流图片加载的临界值,默认20个
      imgFinishCount: 0, // 当前已经完成加载的图片个数
      row: 2, // 瀑布流列数,默认为2 (自定)
      gap: 10, // 瀑布流间距,默认10px (自定)
      initDistance: 10, // 瀑布流距离屏幕边缘的距离,默认10px (自定)
      screenWidth: '', // 当前屏幕的宽度
      waterFullBoxH: '', // 瀑布流盒子总高度
      waterFullItemW: '' // 根据屏幕宽度计算的瀑布流卡片宽度
    }
  }

lógica computacional [Tom]:

  created () {
  	// 根据数据返回的条数计算出临界值
    if (this.postList.length <= 20) {
      this.imgCount = this.postList.length
    } else {
      this.imgCount =
      this.postList.length % 20 === 0 ? 20 : this.postList.length % 20
    }

	// 获取屏幕宽度并且计算每一个瀑布流卡片的宽度
    this.screenWidth = this._sizeWidth().width
    this.waterFullItemW =
       (this.screenWidth - this.gap * (this.row - 1) - this.initDistance * 2) /
      this.row
  },

Análise 1 (imagem sobre o valor crítico):
fluxo de Cachoeira geralmente contêm imagens, há fotos afetarão o cartão de prestação cachoeira, por isso precisamos de saber como estabelecer um valor limite como um nó de imagem completa carregamento, quando atinge o ir buscar uma largura elemento de nó e altura; tendo dito que, 20na verdade, uma série de peças de dados podem ser armazenados, a extremidade traseira da linha perguntou, e o limiar imgCountnúmero do display cachoeira é realmente você precisa para ser processado, que é um pedido para retornar waterFullListno novo aumentar o número de peças de dados, porque envolve pedido pull-down, que waterFullListnão haverá novos dados são adicionados, de modo que sabemos ser um juiz e assim será o número de imagens a carga, isso pode comparar ao redor, há não sei pode sussurrar

Análise (sobre a largura dos cálculos de cartão de cachoeira):
Em primeiro lugar, calculado com base nos dados que usamos antes DOM tornando createda vida gancho para obter a largura visual da tela screenWidthe calcular o número de colunas em cascata personalizados definidos com base em row, cartão cascata passo gapdistância e uma distância de ambos os lados da tela de cascata initDistanceresultando largura cartão cascata

---

methods:{
	_doSort (nodeList) {
      let arr = []
      for (let i = 0; i < nodeList.length; i++) {
        if (i < this.row) {
          // 1- 确定第一行
          nodeList[i].style.top = this.initDistance + 'px'
          nodeList[i].style.left =
            (this.waterFullItemW + this.gap) * i + this.initDistance + 'px'
          arr.push(nodeList[i].offsetHeight)
			
		  // 2- 当瀑布流卡片个数为2以下的话,计算容器高度
          if (nodeList.length === 2) {
            let maxHeight = arr[0] > arr[1] ? arr[0] : arr[1]
            this.waterFallBoxH = maxHeight + this.initDistance * 2
          } else if (nodeList.length === 1) {
            this.waterFallBoxH = arr[0] + this.initDistance * 2
          }
        } else {
          // 3- 找到数组中最小高度  和 它的索引
          var minHeight = arr[0]
          var index = 0
          for (var j = 0; j < arr.length; j++) {
            if (minHeight > arr[j]) {
              minHeight = arr[j]
              index = j
            }
          }
          // 4- 设置下一行的第一个盒子位置
          nodeList[i].style.top =
            arr[index] + this.gap + this.initDistance + 'px'
          // left值就是最小列距离左边的距离
          nodeList[i].style.left = nodeList[index].offsetLeft + 'px'

          // 5- 修改最小列的高度
          arr[index] = arr[index] + nodeList[i].offsetHeight + this.gap
          this.waterFallBoxH = arr[index] + this.initDistance * 2
        }
      }
    },
}

Análise:
A lógica aqui é não quer dizer, é como calcular cada top cartão da cachoeira e deixou, aqui você pode ver nodeListé o que? ?

Isto é o que por this.refs.waterFullItemobtenção de informações sobre o elemento atual, onde você pode obter todas as cartas Cachoeira que flui abaixo os nós, então mais uma vez que quando chegarmos esses nós e quando chamar _doSortmétodos?

methods:{
 _loadImage () {
   this.imgFinishCount = this.imgFinishCount + 1
   if (this.imgFinishCount >= this.imgCount) {
     const nodeList = this.$refs.waterFullItem
     this._doSort(nodeList)
     this.imgFinishCount = 0
   	}
  }
}

Análise:
aqui para falar sobre como completar a imagem do monitor prestados em Vue → uso @load="_loadImage", enquanto a imagem é carregada na vontade _loadImage, desta vez com a necessidade de assegurar a realização do valor crítico das imagens de cartão de exibição cachoeira para calcular a execução coreana carregamento acabado_doSort()

Existem dados re-rendering

É o que diz muito, na verdade, solicitação de dados na parte de trás waterFullListé o nosso principal dados, se os dados não pediu para começar a renderização, ele não aparece cachoeira;

Então, aqui brevemente para falar sobre como saber quando há dados, não especificamente escrito aqui, e gostaria de saber o específica pequenos parceiros são livres para o Google, Baidu

• Use promessa ... então (ou assíncrono ... await) dados solicitação de processamento de retorno de chamada de dados
• Ou directamente através da determinação waterFullListse o ar, não pode ser processado vazia

final

Aqui, Cachoeira perceber sobre Vue é concluída