A alvenaria não está funcionando. Usamos o script jQuery Masonry para criar postagens no estilo Pinterest. O que é jQuery Mansory
Na seção do blog. Este tema fotográfico WordPress será nosso exemplo, mas você provavelmente já viu o jQuery Masonry usado em outros sites WordPress.
O que é jQuery MansoryA alvenaria pode ser considerada um complemento ao css, com o qual você pode organizar os elementos horizontalmente, passando para a posição vertical dependendo da largura do monitor. Como resultado, as lacunas verticais entre elementos de diferentes alturas são minimizadas. Se você quiser fazer o mesmo usando css, acredite, terá muita dor de cabeça.
Neste exemplo você pode ver como funciona o jQuery Masonry antes e depois do uso:
Como você pode ver claramente o resultado, se você usar css float: left, então permanecem espaços vazios, você precisa usar css position, que é bastante problemático de configurar, é possível, MAS ora, Masonry não vai ajudar com isso.
Usando jQuery Mansory em sites WordPressA alvenaria pode ser utilizada em dois casos. A primeira é quando todos os seus blocos com informações têm a mesma largura; nesse caso, você precisa usar este script:
jQuery(document).ready(function($)( $("#content_masonry").masonry(( singleMode: true )); ));
$("#content_maçonaria"). alvenaria((singleMode:true)); } ) ; |
Se você tiver blocos de larguras diferentes, precisará usar o seguinte código:
jQuery(document).ready(function($)( $("#content_masonry").masonry(( columnWidth: 300 )); ));
jQuery(documento). pronto(função($)( $("#content_maçonaria"). alvenaria((largura da coluna: 300)); } ) ; |
Onde columnWidth é a largura da grade (em pixels). A alvenaria seguirá estas duas regras:
O primeiro elemento tem largura total de 190px e margem direita: 0. E o segundo elemento tem margem esquerda: 0, em teoria esses dois elementos deveriam se tocar. Mas como ColumnWidth está definido como 200px, o segundo elemento começa a aparecer a uma distância de 200px.
Este processo não acontecerá se não tivermos um valor ColumnWidth no script e todos os elementos começarem um após o outro, por isso é necessário separá-los usando margem.
Então as maravilhas do jQuery Masonry e do WordPress 3..Agora vamos fazer um pouco de codificação. Primeiro, vamos incluir as bibliotecas jQuery e Masonry necessárias no arquivo header.php. Coloque este código em header.php (você pode baixá-lo fora do site):
//conecta jQuery