replicando el diseño de apilamiento Div Absolute de Pinterest

El diseño DIV único de Pinterest presenta un desafío a los programadores que buscan replicar su funcionalidad. El jQuery y CSS personalizado utilizados para ajustar dinámicamente el diseño basado en el cambio de tamaño del navegador y evitar que la dependencia de apilamiento vertical deja a muchos preguntando cómo lograr resultados similares.

Respuesta:

El principio central detrás del diseño de Pinterest involucra absolutamente posicionando los contenedores PIN, determinando la columna y el tamaño de la columna y el tamaño de la calumnia y el tamaño de la núcleos, y utilizan un principio de Pinterest, y se utiliza un diseño de Pinterest, y que realizan un ajuste de Pinterest, y realizan un ajuste de Pinterest, y realizan un ajuste de Pinterest, y realizan un ajuste de Pinterest, y realizan un ajuste de Pinterest, y realizan un ajuste de Pinterest, y realice un tamaño de Pinterest. La altura de cada columna.

1. Posicioning pin Containers:

Cada contenedor de pin debe colocarse absolutamente dentro del contenedor principal. Esto permite que los pines individuales se coloquen independientemente entre sí.

2. calculando la columna y los tamaños de canaletas:

Determine el ancho disponible para los contenedores de pines y calcule el número de columnas que se ajustan cómodamente. Use el ancho de la columna resultante y un tamaño de canaleta predefinido para calcular los parámetros generales de diseño.

3. Based de altura basada en el seguimiento:

Inicialice una matriz con una longitud igual al número de columnas. A medida que itera a través de cada pin, determine qué columna tiene la altura más corta en ese momento. Almacene esta altura dentro del elemento de matriz correspondiente.

4. Pin ubicación:

iterate a través de cada pin y:

• posicione dentro de la columna con la altura más corta (determinada por la matriz). índice multiplicado por el ancho de la columna y el canal.
• Establezca la propiedad "superior" CSS a la altura almacenada en la matriz para la columna seleccionada.
• actualice la altura de la columna (valor de la matriz) agregando la altura del pin.
• al adhirer estos pasos, es posible crear un diseño de Pinterest y que se mime. Algoritmo eficiente de colocación de pin.