[Vue / Reaccionar] cascada en Vue (lógico, la escalabilidad)

Los aspectos a considerar

• Vue DOM adquirido elemento nodo
• Cómo solicitar la participación de los datos de validación de datos llega prestada una vez nodo DOM
• Implique la prestación de la carga de imágenes, cómo escuchar DOM prestación completa es ir calculando altura del elemento (Bug: si se trata de imágenes cargadas en la red situación desagradable, Vue en altura para obtener el elemento actual contiene la imagen no es correcto, afectar a la disposición en cascada subsiguiente)
• Cómo lograr esto se calcula automáticamente aparato cascada de acuerdo con el tamaño de la pantalla de la anchura de la tarjeta, y se define como la distancia entre la distancia desde el margen del elemento de pantalla y la tarjeta y la tarjeta (Desarrollo Custom)
• Como se trata de un posicionamiento absoluto por el diseño de la tarjeta (parte superior, la propiedad izquierda), entonces la altura cascada de la cascada con el aumento de cómo la tarjeta de espera automáticamente hacia arriba (altura calculada)

Este es el principal problema que se presenta cuando se utiliza una cascada de desarrollo Vue, la lista aquí, probablemente, no mucho BB explicar uno por uno en la solución de código

Análisis y Resolución

En primer lugar, ¿cómo Layout (HTML)

Definición:
diseño correcto (es decir, escribir HTML) es un requisito previo para la realización de una cascada, una condena de acuerdo a su propio proyecto 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álisis:

A partir de lo anterior, es fácil ver HTML trilogía

• Definir una bodega recipiente toda la cascada de waterfull-container

  Cuidado socio menor encontrará aquí también define una atributos de estilo dinámico, calculado de acuerdo con la altura máxima de la tarjeta de la altura de la cascada flujo de contenedores en general, que se coloca después de que se utilizarán, el seguimiento se hablará

• Loop waterfull-card-listque se basa en waterFullListdatos cíclico

  Podemos ver que hay una ref="waterFullItem"que es el problema mencionado anteriormente: [] → Vue obtener un elemento de elementos de nodo puede obtener la información que desea por this.refs.waterFullItem

• tarjeta de cascada waterfull-card-itemen su conjunto

  Aquí se puede escribir en función de su propia pantalla de diseño de la tarjeta, pero usted quiere saber todos los contenidos de la tarjeta hasta debe ser colocado aquí, que no afectará a la tarjeta posterior cálculo de la altura elemento

Entonces, ¿cómo se escribe el estilo (CSS)

Definición:
De acuerdo con el diseño HTML, ser escrita en el estilo correspondiente, donde además de waterfull-card-itemsu propio diseño, el otro está escrito en la línea fija

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

Análisis:
Si es tan simple, podemos ver que en el recipiente principal posicionamiento relativo relative, y la lista de posicionamiento absoluto Cascada de secuencia absolute, un pequeño socio de entender, soy tarjeta de cascada waterfull-card-itemesta forma no establece la anchura y la altura? ?

En primer lugar tenemos que saber, cascada definimos el ancho y la altura no están codificados, el ancho es el ancho del dispositivo y el número de columnas es necesario definir la cascada se calcularon, y la caída de agua es la esencia de flujo, no hace falta decir, si alta fijos muerto, entonces escribieron lo que la cascada, y estos cálculos se atribuyen a la parte posterior del Javascript ...

Por último, ¿cómo calculamos (JavaScript)

Definición:
Primero calculamos la lógica de escritura, a continuación, se resuelve gradualmente los problemas encontrados después de, por ejemplo, saber cuándo han llegado datos prestada una vez, el segundo es el momento de llamar a una función para calcular una serie de problemas

Obtiene la anchura actual y la altura de la función del dispositivo [] general:

Como se mencionó anteriormente, la anchura que se calcula que dispositivo en cascada único de acuerdo con la anchura de la tarjeta

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

Se utiliza para calcular los datos personalizados se puede ampliar [Personalizado]:

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

lógica computacional [Key]:

  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álisis 1 (imagen en el valor crítico):
Cascada de la secuencia generalmente contienen imágenes, hay fotos afectarán a la tarjeta de prestación cascada, por lo que necesitamos saber cómo establecer un valor umbral como un nodo de imagen completa la carga, cuando llega a la ir a buscar un ancho elemento de nodo y la altura, una vez dicho esto, 20de hecho, una serie de piezas de datos se puede almacenar, el extremo posterior de la línea preguntó; y el umbral de imgCountnúmero de la pantalla cascada es en realidad lo que necesita ser prestados, que es una solicitud para volver waterFullListen el nuevo aumentar el número de piezas de datos, porque se trata de solicitud desplegable, que waterFullListhabrá nuevos datos se añaden, por lo que sabemos que es un juez y así será el número de imágenes a la carga, esto podría comparar alrededor, hay no sé puede susurro

Análisis (aproximadamente el ancho de los cálculos de tarjetas de cascada):
En primer lugar, se calculó sobre la base de los datos que hemos utilizado antes DOM renderizado createdvida descolgado para obtener el ancho visual de la pantalla screenWidthy se calcula el número de columnas en cascada personalizadas definidas en base a row, tarjeta de cascada terreno de juego gapa distancia y una distancia a ambos lados de la pantalla cascada initDistanceresultante de anchura de tarjeta cascada

---

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álisis:
La lógica aquí no quiere decir, es la forma de calcular cada parte superior tarjeta de cascada y dejó; aquí se puede ver nodeListque es lo que? ?

Esto es lo que mediante this.refs.waterFullItemla obtención de información sobre el elemento actual, donde se puede obtener todas las tarjetas de la cascada que fluye por los nodos, a continuación, una vez más que cuando lleguemos estos nodos y cuándo llamar _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álisis:
Aquí para hablar de cómo completar la imagen del monitor dictada en Vue → uso @load="_loadImage", siempre y cuando la imagen se carga en la voluntad _loadImage, esta vez con la necesidad de garantizar la realización del valor crítico de las imágenes de la tarjeta de visualización cascada para el cálculo de la ejecución de Corea terminado de cargar_doSort()

Existen datos re-representación

Se dice mucho, de hecho, los datos de solicitud en la parte posterior waterFullListes nuestro principal de datos, si los datos no han solicitado para comenzar la representación, no parece cascada;

Así que aquí brevemente para hablar de cómo saber cuándo hay datos, no específicamente escritas aquí, y me gustaría saber lo específico pequeños socios son libres de Google, Baidu

• Uso promesa ... entonces (o asíncrono ... Aguarde) Solicitud de procesamiento de datos de devolución de llamada de datos
• O directamente mediante la determinación de waterFullListsi el aire, no se puede representar vacía

final

Aquí, cascada darse cuenta sobre Vue se ha completado