La mampostería no funciona. Usamos el script jQuery Masonry para diseñar publicaciones al estilo Pinterest. ¿Qué es jQuery Mansory?
En la sección del blog. Este tema fotográfico de WordPress será nuestro ejemplo, pero probablemente hayas visto jQuery Masonry utilizado en otros sitios de WordPress.
¿Qué es jQuery Mansory?La mampostería puede considerarse una adición a CSS, con la que puede organizar elementos horizontalmente, moviéndolos a una posición vertical dependiendo del ancho del monitor. Como resultado, se minimizan los espacios verticales entre elementos de diferentes alturas. Si quieres hacer lo mismo usando CSS, créeme, tendrás muchos dolores de cabeza.
En este ejemplo puedes ver cómo funciona jQuery Masonry antes y después de su uso:
Como puede ver claramente el resultado, si usa css float: left, luego quedan espacios vacíos, necesita usar css position, que es bastante problemático de configurar, es posible, PERO por qué, Masonry no ayudará con esto.
Usando jQuery Mansory en sitios de WordPressLa mampostería se puede utilizar en dos casos. La primera es cuando todos tus bloques con información tienen el mismo ancho, en cuyo caso necesitas usar este fragmento de script:
jQuery(documento).ready(function($)( $("#content_masonry").masonry(( singleMode: true )); ));
$("#content_masonry"). mampostería ((modo único: verdadero)); } ) ; |
Si tiene bloques de diferentes anchos, debe utilizar el siguiente código:
jQuery(documento).ready(function($)( $("#content_masonry").masonry(( columnWidth: 300 )); ));
jQuery (documento). listo(función($)( $("#content_masonry"). mampostería ((columnWidth: 300)); } ) ; |
Donde columnWidth es el ancho de la cuadrícula (en píxeles). La albañilería seguirá estas dos reglas:
El primer elemento tiene un ancho total de 190px y margen derecho: 0. Y el segundo elemento tiene margen izquierdo: 0, en teoría estos dos elementos deberían tocarse. Pero como ColumnWidth está establecido en 200 px, el segundo elemento comienza a aparecer a una distancia de 200 px.
Este proceso no ocurrirá si no tenemos un valor de ColumnWidth en el script y todos los elementos comienzan uno detrás del otro, por lo que es necesario separarlos usando margen.
Entonces las maravillas de jQuery Masonry y WordPress 3...Ahora hagamos un poco de codificación. Primero, incluyamos las bibliotecas jQuery y Masonry necesarias en el archivo header.php. Coloque este código en header.php (puede descargarlo fuera del sitio):
//conectar jQuery