Oye, oye, estoy aquí de nuevo. Hoy, el tema que estamos discutiendo es el diseño de cascada . Cuando abrimos Taobao y deslizamos hacia abajo, podemos ver muchos productos ordenados de arriba a abajo. Sin embargo, la altura de los divs de cada producto es diferente.Este diseño se llama diseño en cascada . La página es un diseño desigual de varias columnas, similar al que se muestra en la figura anterior. A medida que la barra de desplazamiento de la página se desplaza hacia abajo, este diseño continuará cargando bloques de datos y los agregará al final actual. La imagen tiene un ancho fijo . y una altura baja No es lo mismo, de acuerdo con la escala de proporción original hasta que el ancho alcanza un requisito fijo, después de que cada fila está llena, la nueva imagen se agrega a la columna con la altura total más pequeña .
En una palabra, es colocar una fila (dos columnas) primero, y comenzar desde la segunda fila, y agregar cada imagen debajo de la imagen con la altura más pequeña que se haya ordenado hasta ahora . Siempre que coloquemos un gráfico, la altura de esa columna cambiará en consecuencia. A continuación, usamos el marco vue2 para hablar sobre cómo escribir simplemente un diseño en cascada.
Primero cargue el código de la plantilla:
<template>
<div class="box">
<!-- for循环waterfallList中的每一项，包括背景色background、左距离left、上距离top、高度height，每一项都是绝对定位，根据left和top控制位置，所以父元素box要设置成相对定位 -->
<div
class="items"
v-for="(item, i) in waterfallList"
:key="i"
:style="{
background: item.background,
left: item.left + 'px',
top: item.top + 'px',
height: item.height + 'px',
}"
></div>
</div>
</template>Entre ellos, la lista de cascadas es una matriz compuesta por objetos que incluyen el fondo de color de fondo, la distancia a la izquierda a la izquierda, la distancia superior a la parte superior y la altura. En este caso, el div de cada ciclo debe configurarse en posición absoluta y su cuadro de elemento principal debe configurarse a Posicionamiento relativo, el siguiente es el código scss
<style lang="scss" scoped>
.box {
//父元素相对定位
position: relative;
border: 1px solid #ccc;
.items {
//子元素绝对定位
width: 200px;
position: absolute;
}
}
</style>Ahora es el momento de escribir la parte js. Primero almacenamos algunas variables en los datos. Entre ellos, la lista son los datos originales (es decir, lo que devuelve el backend en el proyecto real, la mayoría de las partes se omiten aquí, solo se establecen la altura y el color del div, y todos los parámetros, como la url del se omiten las imágenes) . cascadaLista ya se ha dicho antes. heightList es una matriz que guarda todas las alturas. La matriz está llena de números, para una comparación posterior . Los estudiantes que hayan estudiado ts deben saber que se puede expresar como heightList: number[] .
<script>
export default {
data() {
return {
//所有要显示的数据最开始的列表，后面要经过计算形成waterfallList数组再显示在页面上
list: [
{
height: 300,
background: "red",
},
{
height: 310,
background: "pink",
},
{
height: 320,
background: "blue",
},
{
height: 290,
background: "green",
},
{
height: 300,
background: "gray",
},
{
height: 310,
background: "#CC00FF",
},
{
height: 290,
background: "black",
},
{
height: 280,
background: "#996666",
},
{
height: 320,
background: "skyblue",
},
{
height: 300,
background: "#993366",
},
{
height: 280,
background: "#33FF33",
},
{
height: 310,
background: "skyblue",
},
{
height: 290,
background: "#6633CC",
},
{
height: 300,
background: "#666699",
},
{
height: 300,
background: "#66CCFF",
},
{
height: 300,
background: "skyblue",
},
{
height: 290,
background: "#CC3366",
},
{
height: 290,
background: "#CC9966",
},
{
height: 290,
background: "#FF00FF",
},
{
height: 320,
background: "#990000",
},
{
height: 310,
background: "red",
},
{
height: 280,
background: "#999966",
},
{
height: 290,
background: "#CCCC66",
},
{
height: 300,
background: "#FF33FF",
},
{
height: 310,
background: "#FFFF66",
},
{
height: 290,
background: "red",
},
{
height: 280,
background: "skyblue",
},
{
height: 290,
background: "#33CC00",
},
{
height: 300,
background: "#330033",
},
{
height: 280,
background: "#0066CC",
},
{
height: 290,
background: "skyblue",
},
{
height: 280,
background: "#006666",
},
{
height: 290,
background: "yellow",
},
{
height: 300,
background: "yellow",
},
{
height: 280,
background: "#33CCFF",
},
{
height: 310,
background: "yellow",
},
{
height: 310,
background: "yellow",
},
{
height: 290,
background: "#33FF00",
},
{
height: 300,
background: "yellow",
},
{
height: 280,
background: "green",
},
],
waterfallList: [], //保存所有list的top和left信息
heightList: [], //保存所有height 数组里全是数字，为了后面比较大小 即heightList:number[]
};
},
};
</script>La siguiente es la parte de métodos más importante, consulte
<script>
export default {
methods: {
initWaterfall() {
//比css设置的宽度200px大一点，这样就不会粘在一起，一行两个，两者之间距离为10
let width = 210;
//每次初始化的时候要把数据清空，防止直接在很多数据上继续加，导致数量超出
this.waterfallList = []; //存着一个又一个的对象
this.heightList = []; //存着所有列目前的总高度，用来判断下一个加在哪个位置
//只放两列
for (let i = 0; i < this.list.length; i++) {
if (i < 2) {
//第一行，直接摆
//第一行的top距离都是0
this.list[i].top = 0;
//第一行的left左边距离根据列数乘以固定宽度求得
this.list[i].left = i * width;
//放进瀑布列表，作为初始化项，template中的代码先显示一行两列
this.waterfallList.push(this.list[i]);
//每一行的高度初始化
this.heightList.push(this.list[i].height);
} else {
//找出最小的高度
let current = Math.min(...this.heightList);
//找出最小高度对应的index，最后一个最小的
let index = this.heightList.lastIndexOf(current);
//top为最小高度+20 为了跟上方有20的距离
this.list[i].top = current + 20;
//left就为最小高度的序号乘以宽度
this.list[i].left = index * width;
//改变这个最小的高度了，要加上前面多加的20以及新增的元素自己的高度
this.heightList[index] += 20 + this.list[i].height;
//在要显示的列表中把这个list的项加进去
this.waterfallList.push(this.list[i]);
}
}
},
},
mounted() {
//页面加载的时候，就初始化这个瀑布流，然后就可以直接看到了
this.initWaterfall();
},
};
</script>Explicación línea por línea:
En primer lugar, el ancho de cada div se establece en 200 px en css, por lo que aquí establecemos un ancho variable en 210, y los 10 píxeles adicionales son para garantizar que haya un espacio entre cada columna. Cada vez que se inicializa, es necesario borrar la lista de cascada y la lista de altura ( puede que no sean dos columnas, calcule la cantidad máxima de columnas que se pueden colocar de acuerdo con el ancho de la ventana del navegador clientWidth o el ancho de la caja, y luego llámelo cada vez que se cambie el tamaño de la página Este método, por lo que debe borrarse. ) Puede pensar en cómo hacer esto. Este artículo solo habla sobre la situación de dos columnas.
Recorra esta lista, si el índice es menor que 2, es decir, el diseño todavía está establecido en la primera fila, luego visite directamente, la distancia a la izquierda es i * ancho variable y la distancia arriba es 0. Luego calcúlelo y colóquelo en la matriz de lista de cascadas, y coloque la altura de cada columna en la matriz de lista de alturas.
A partir de la segunda columna, es necesario hacer un juicio, que es el más pequeño en la matriz heightList. Aunque aquí solo hay dos elementos, esta es una práctica común. Combine directamente tres puntos con el Math.min más pequeño, y luego encuentre su índice (si hay varios iguales, se colocarán debajo del último y más pequeño de forma predeterminada). Luego, la izquierda del elemento es el índice de la altura mínima multiplicada por el ancho, la parte superior es la altura mínima + 20 (mantenga 20 intervalos hacia arriba y hacia abajo), y luego colóquelo en la matriz de lista de cascada y agregue la nueva altura a la elemento de heightList y Spacing 20. Esto solucionará el problema. miramos la foto
Las ventajas son las siguientes
Ahorro de espacio: Reduce la complejidad de la página
Muy amigable para dispositivos de pantalla táctil: Al deslizar hacia arriba para navegar, el método de interacción es más intuitivo
Buena experiencia visual: Al navegar, no se verá afectado por la altura ordenada de la página, desigual, reduciendo la fatiga de navegación
Todo tiene dos
lados. Las desventajas son las siguientes
. La longitud total del contenido no se puede captar
. Cuando hay demasiados datos, es fácil causar una carga en la página.
Al cargar de nuevo, es difícil ubicar el contenido. navegó la última vez.
Muy bien, vamos a compartirlo esta vez, vamos a probarlo. Por cierto, piensa en las preguntas de reflexión que hice anteriormente, ¡hasta la próxima!