Usando jQuery Masonry para publicaciones similares a Pinterest

Con la inclusión de jQuery Masonry en la biblioteca principal de WordPress 3.5, nunca ha sido tan fácil cambiar el diseño de una plantilla para publicaciones recientes.

La publicación de su contenido en un diseño de mampostería puede hacer que la porción de blog de su sitio web sea más interesante visualmente para sus lectores. Con jQuery Masonry, no importa la longitud de su extracto de publicación (dentro de lo razonable, por supuesto), se ajustará para llenar cada bit de espacio. Este tutorial explorará la idea detrás del uso de la nueva biblioteca de mampostería jQuery incluida con WordPres 3.5.

¿Qué es un diseño de mampostería??

Si ha oído hablar de un muro de "mampostería" (piense en un muro de ladrillos), entonces tiene una imagen mental bastante buena de cómo podría ser un diseño de mampostería en su sitio web. Si todavía estás confundido, visita Pinterest y comprueba cómo han colocado cada "pin" en su sitio web. Todo está dispuesto verticalmente, llenando todo el espacio disponible. Es importante tener en cuenta el término "vertical" en la última oración. Puede lograr el mismo tipo de efecto de mampostería utilizando los flotadores de CSS, pero puede encontrar problemas de espaciado. Esto sucede porque, a diferencia de jQuery Masonry, los elementos flotantes de CSS organizarán los elementos primero horizontalmente, luego verticalmente. Esto puede hacer que las brechas de espacio en su diseño sean muy inconsistentes ya veces no deseadas. Usar jQuery Masonry puede ayudar a resolver este problema.

Ejemplo de Flotación CSS

Observe cómo hay espacios entre publicaciones de diferentes alturas cuando usa flotadores CSS.

Ejemplo de mampostería jQuery

Con jQuery Masonry cada publicación encaja perfectamente en su lugar, sin dejar huecos incómodos.

Ahora que sabemos lo que es un diseño de mampostería, comencemos a crear un diseño simple de jQuery Masonry para nuestras publicaciones recientes.

Paso 1 Utilizando `wp_enqueue_script` cargar la biblioteca

Antes de que podamos comenzar a construir nuestro muro, necesitamos cargar el script apropiado. Deberá agregar el siguiente código a su funciones.php expediente.

 function mason_script () wp_enqueue_script ('jquery-masonry');  add_action ('wp_enqueue_scripts', 'mason_script');

Paso 2 Configuración de la red

Para mi estructura básica de mampostería, voy a implementar el siguiente HTML en mi bucle (o plantilla personalizada, donde quiera que planee construir su muro). Primero, voy a configurar el contenedor para el muro de mampostería y luego configurar el contenedor para cada puesto dentro del muro.

Configurando tu CSS

Tendrá que definir el ancho de su contenedor y el ancho del poste para lograr el efecto de mampostería real. Para mi demostración, he configurado mi contenedor a 960 píxeles de ancho y quiero tener 4 columnas de publicaciones. Por lo tanto, necesito hacer algunos cálculos matemáticos simples para encontrar el tamaño del ancho que debe tener cada publicación en mi muro.

Anchura del bloque = 960 px / 4 publicaciones = 240 píxeles cada una.

Con ese número en mente, puedo configurar mi diseño en mi hoja de estilos:

 #container width: 960px; // ancho de todo el contenedor para la pared .brick ancho: 220px; // ancho de cada ladrillo menos el relleno entre el relleno: 0px 10px 15px 10px;

Paso 3 Configurar la función

A continuación, debemos configurar la función de mampostería para que todos los contenedores div se enreden en la pared. Usa el siguiente código para hacer esto:

 jQuery (document) .ready (function ($) $ ('#container') .masonry (columnWidth: 220););

Conclusión

La mampostería viene con muchas opciones integradas que lo hacen muy atractivo para usar con WordPress. Por ejemplo, podría aplicar la opción de animación para "animar" sus arreglos de publicación, agregar elementos adicionales a la pared (ideal para diseños de portafolio), o incorporarla con Infinte Scroll de Paul Irish. Independientemente de cómo planee usar el script de jQuery Masonry, es una adición bienvenida a WordPress 3.5.

Nota al margen: Lograr este mismo efecto en CSS3 es posible. Sin embargo, debe utilizar la nueva funcionalidad de "columnas", que aún no es compatible con todos los navegadores.

Código