Versão 2.x – Gridzy.Gallery

O site foi traduzido automaticamente. Se algo não estiver claro, por favor, dê uma olhada na documentação em inglês.

Uso básico

Carregue os arquivos Gridzy no seu servidor e adicione-os ao seu site (geralmente na seção head):

<link rel="stylesheet" href="gridzy/gridzy.min.css" />
<script src="gridzy/gridzy.min.js"></script>

Adicione o código HTML (em qualquer lugar na seção do corpo):

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

É isso! Esse é um exemplo totalmente funcional. Nenhuma inicialização extra é necessária.

Configuração

A maneira mais fácil de configurar o Gridzy é usar apenas atributos HTML. Você só precisa prefixar os nomes das opções com data-gridzy- . Então, para definir a opção spaceBetween , basta adicionar o atributo data-gridzy-spaceBetween .

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Opções principais

	Valor Padrão	Descrição
`animate`	`true`	Determina se as animações devem ser usadas quando a grade muda (por exemplo, ao redimensionar a janela do navegador ou ao definir um filtro).
`layout`	`justified`	Define o layout usado. O Gridzy.js 2 suporta os dois layouts diferentes `justified` e `waterfall` . Cada um deles tem seus próprios parâmetros de opção adicionais, que você pode encontrar abaixo desta tabela.
`filter`	`*`	Determina quais imagens devem ser mostradas. Qualquer seletor CSS pode ser usado como valor aqui. Geralmente definido automaticamente via `filterControls` (veja a próxima opção). Confira os filtros
`filterControls`		Determina quais elementos de formulário podem ser usados para filtrar as imagens. Qualquer seletor CSS, que seleciona elementos de formulário HTML, pode ser usado como valor aqui. Confira os filtros
`autoConsiderScrollBars`	`true`	Para prever a largura disponível se barras de rolagem aparecerem ou desaparecerem. É sempre recomendado deixar em `true` a menos que esse automatismo cause problemas.

Justified Opções de layout

	Valor Padrão	Descrição
`autoFontSize`	`false`	Atualiza automaticamente a propriedade font-size de cada caixa com base no tamanho original da caixa. Por padrão, a propriedade font-size não é definida explicitamente.
`desiredHeight`	`190`	Define a altura desejada das linhas de elementos. A altura real será computada dependendo da largura disponível e dos elementos na linha.
`hideOnMissingImage`	`true`	Oculta caixas que contêm imagens que não puderam ser carregadas.
`spaceBetween`	`4`	Define a distância entre elementos em pixels.
`lastRowAlign` desde a versão 2.3.0	`justified`	Define o comportamento da última linha. Os valores permitidos são `left` , `center` , `right` e `justified` .
`singleRowAlign` desde a versão 2.3.0	`justified`	Define o comportamento se houver apenas uma única linha. Os valores permitidos são `left` , `center` , `right` e `justified` .
~~`fillLastRow`~~ ~~desde a versão 2.1.0~~	~~`true`~~	REMOVIDO desde a versão 2.4.0 (OBSOLETO desde a versão 2.3.0 ) Organiza as imagens de modo que a última linha esteja sempre completamente preenchida. Se você planeja anexar imagens dinamicamente, pode ser uma boa ideia desativar isso. Não tem efeito em linhas únicas (veja `fillSingleRow` ).
`fillSingleRow` desde a versão 2.1.0	~~`true`~~	REMOVIDO desde a versão 2.4.0 (OBSOLETO desde a versão 2.3.0 ) Se houver apenas uma linha, ele organiza as imagens para que a linha esteja sempre completamente preenchida. Se acontecer de você ter apenas uma ou duas imagens na galeria, pode ser uma boa ideia desativar isso.

Waterfall Opções de layout

	Valor Padrão	Descrição
`autoFontSize`	`false`	Atualiza automaticamente a propriedade font-size de cada caixa com base no tamanho original da caixa. Por padrão, a propriedade font-size não é definida explicitamente.
`desiredWidth`	`250`	Define a largura desejada das colunas. A largura real será computada dependendo da largura disponível e do número de colunas.
`hideOnMissingImage`	`true`	Oculta caixas que contêm imagens que não puderam ser carregadas.
`horizontalOrder`	`false`	Define que os elementos são colocados estritamente um elemento em cada coluna da esquerda para a direita, então começa novamente na coluna mais à esquerda independente de qual coluna tem mais lugar. Por padrão, os elementos serão sempre colocados na coluna com a menor altura.
`spaceBetween`	`4`	Define a distância entre elementos em pixels.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

Opções mais avançadas

Para opções mais avançadas, confira a API .

HTML semântico

A estrutura HTML mais simples do Gridzy é esta:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

No entanto, Gridzy é muito flexível e você pode usar quase qualquer outra estrutura HTML. Há apenas alguns pontos a considerar:

Cada filho do elemento container representa um item na grade.
Tanto o elemento container quanto seus filhos podem ser de qualquer tipo de tag, como ul e li (basta considerar redefinir os padrões do navegador).
Se um elemento img não for um filho direto, ele precisará da classe gridzyImage .

Então esta também é uma estrutura HTML funcional:

<ul class="gridzy">
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    </span>
  </li>
</ul>

Especialmente se você quiser adicionar legendas, você precisa de uma estrutura HTML avançada. Para aprender mais sobre isso, dê uma olhada em Captions & Skins .

Legendas e Skins

Se você quiser adicionar legendas à sua galeria, você precisa definir a aparência. Portanto, algumas skins predefinidas estão disponíveis. Cada skin consiste em um arquivo CSS. Você precisa adicionar este arquivo além dos arquivos Gridzy principais (geralmente na seção head):

<link rel="stylesheet" href="gridzy/skins/gridzySkinClassic/style.min.css" />

Além disso, você precisa de uma estrutura HTML avançada:

<div class="gridzy gridzySkinClassic">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    <figcaption class="gridzyCaption">yet another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    <figcaption class="gridzyCaption">a caption text again</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    <figcaption class="gridzyCaption">one last caption text</figcaption>
  </figure>
</div>

Se você está se perguntando sobre a estrutura HTML, dê uma olhada em HTML Semântico .

Para a legenda, você pode usar qualquer tipo de tag, apenas garanta que ela tenha a classe gridzyCaption . O elemento img precisa da classe gridzyImage .

O exemplo acima mostra a skin gridzySkinClassic . Para usar uma diferente, basta substituir o nome da skin por um destes:

Skins incluídas

	Aulas disponíveis
gridzyPeleEmBranco um bom ponto de partida para criar sua própria skin pré-visualização ao vivo	`gridzySkinBlank`
gridzySkinClassic pré-visualização ao vivo	`gridzySkinClassic` `gridzySkinClassicLight`(OBSOLETO desde a versão 2.6.0)
gridzySkinFullOverlay pré-visualização ao vivo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(OBSOLETO desde a versão 2.6.0)
gridzySkinLift pré-visualização ao vivo	`gridzySkinLift` `gridzySkinLiftLight`(OBSOLETO desde a versão 2.6.0)
gridzySkinMagnifier funcionalidade de zoom não incluída pré-visualização ao vivo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(OBSOLETO desde a versão 2.6.0)

Todos os skins acima precisam apenas de um arquivo CSS, mas há skins adicionais que também exigem um arquivo JavaScript:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>

	Aulas disponíveis
gridzySkinBlur não funciona no IE pré-visualização ao vivo	`gridzySkinBlur` `gridzySkinBlurLight`(OBSOLETO desde a versão 2.6.0)
gridzySkinCard pré-visualização ao vivo	`gridzySkinCard` `gridzySkinCardLight`(OBSOLETO desde a versão 2.6.0)

Opções de pele

Desde a versão 2.6.0, há Opções para configurar os skins incorporados. Dependendo do skin específico, você pode definir a cor de fundo, a cor do texto e a sombra do texto. Você só precisa usar propriedades personalizadas CSS, como pode ver aqui:

<div class="gridzy gridzySkinClassic" style="--background: rgba(0, 80, 117, .8); --color: rgb(238, 238, 238); ">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>

  ...

</div>

Confira as variáveis suportadas e os valores padrões para cada skin aqui:

gridzySkinClassic

Variável	Valor Padrão	Informação
`--background`	`rgba(0, 0, 0, .7)`	permite qualquer valor de fundo CSS
`--color`	`rgb(255, 255, 255)`	permite qualquer valor de cor CSS
`--text-shadow`	`none`	permite qualquer valor CSS text-shadow

gridzySkinFullOverlay

Variável	Valor Padrão	Informação
`--background`	`rgba(0, 0, 0, .7)`	permite qualquer valor de fundo CSS
`--color`	`rgb(255, 255, 255)`	permite qualquer valor de cor CSS
`--text-shadow`	`none`	permite qualquer valor CSS text-shadow

gridzySkinLift

Variável	Valor Padrão	Informação
`--background`	`rgba(0, 0, 0, .7)`	permite qualquer valor de fundo CSS
`--color`	`rgb(255, 255, 255)`	permite qualquer valor de cor CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	permite qualquer valor CSS text-shadow

gridzySkinMagnifier

Variável	Valor Padrão	Informação
`--background`	`rgba(0, 0, 0, .7)`	permite qualquer valor de fundo CSS
`--color`	`rgb(255, 255, 255)`	permite qualquer valor de cor CSS

Esta skin não suporta --text-shadow

gridzySkinBlur

Variável	Valor Padrão	Informação
`--background`	`rgba(0, 0, 0, .7)`	permite qualquer valor de fundo CSS
`--color`	`rgb(255, 255, 255)`	permite qualquer valor de cor CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	permite qualquer valor CSS text-shadow

gridzySkinCard

Variável	Valor Padrão	Informação
`--background`	`rgba(0, 0, 0, 1)`	permite qualquer valor de fundo CSS
`--color`	`rgb(255, 255, 255)`	permite qualquer valor de cor CSS
`--text-shadow`	`none`	permite qualquer valor CSS text-shadow

Todos os skins predefinidos suportam apenas legendas de texto simples. Você pode criar seus próprios skins mais complexos. Dê uma olhada no Style Gridzy .

Estilo Gridzy

Se nenhuma skin predefinida atender às suas necessidades, você pode criar a sua própria.

A maneira mais fácil é primeiro copiar uma skin existente e adaptá-la às suas próprias necessidades. A skin predefinida gridzySkinBlank normalmente forneceria uma boa base, bem como uma boa documentação no arquivo CSS:

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

No arquivo CSS você encontrará as classes gridzySkinBlank , gridzyImage e gridzyCaption . O Gridzy em si não precisa dessas classes. Elas são usadas apenas para estilização e, portanto, você pode removê-las ou renomeá-las se quiser.

Além disso, você encontrará a classe CSS gridzyItem . Gridzy define essa classe automaticamente para todos os filhos diretos do elemento container principal. Então, você pode usar essa classe para estilizar os itens da sua galeria.

Pense em coisas importantes

O conteúdo do item deve ser totalmente responsivo. Considere que o tamanho do elemento definitivamente mudará. Use valores de porcentagem em vez de valores de pixel. E dê uma olhada na opção de layout Gridzy autoFontSize , que vincula o tamanho da fonte ao tamanho da caixa do item.
Cada item deve ter uma proporção de aspecto bem definida. A proporção de aspecto do item nunca mudará e é necessária para calcular a grade. Então, se um item não tiver automaticamente uma proporção de aspecto bem definida, pré-defina-a manualmente (por exemplo, via css).

Em alguns casos, pode ser mais fácil estilizar o conteúdo dos itens antes que o Gridzy seja inicializado. Simplesmente remova a classe gridzy ou o arquivo Gridzy javascript temporariamente para isso.

É isso! É tudo o que você precisa para construir sua própria skin. A maioria das skins predefinidas não usa mais que isso.

Mas pode haver mais se você quiser…

Skins avançadas

Gridzy usa mais classes CSS do que apenas gridzyItem . A maioria delas será definida automaticamente e você pode usá-las para estilização também.

Principais classes de contêineres

Nome da classe	Descrição
`gridzy` para definir manualmente	O Gridzy encontra automaticamente elementos com esta classe e os inicializa.
`gridzyAnimated`	Será definido automaticamente se a opção `animate` for `true` . Se esta classe for definida manualmente, a opção `animate` será automaticamente definida `true` também (exceto se for definida explicitamente como `false` ).

Classes de itens

Nome da classe	Descrição
`gridzyItem`	Será definido assim que o item iniciar o processo de inicialização. Nunca será removido.
`gridzyItemInitializing`	Será definido assim que o item iniciar o processo de inicialização. Será substituído por `gridzyItemReady` assim que o item for totalmente inicializado. Não significa que as imagens estão totalmente carregadas (veja `gridzyItemLoading` ), mas que o item está pronto para ficar visível.
`gridzyItemReady`	Substituirá `gridzyItemInitializing` assim que o item for totalmente inicializado. Nunca será removido. Não significa que as imagens estão totalmente carregadas (veja `gridzyItemComplete` ), mas o item está pronto para ficar visível.
`gridzyItemLoading`	Será definido assim que o item iniciar o processo de inicialização. Será substituído por `gridzyItemComplete` assim que as imagens contidas (geralmente apenas uma) forem totalmente carregadas.
`gridzyItemComplete`	Substituirá `gridzyItemLoading` assim que as imagens contidas (geralmente apenas uma) forem totalmente carregadas. Nunca será removido.
`gridzyItemInitialToVisible`	Será definido assim que o item começar a aparecer pela primeira vez. Será removido assim que o item estiver completamente visível.
`gridzyItemVisible`	Será definido assim que o item estiver totalmente visível. Será removido assim que o item começar a desaparecer.
`gridzyItemVisibleToHidden`	Será definido assim que o item começar a desaparecer. Será removido assim que o item estiver completamente escondido.
`gridzyItemHidden`	Será definido assim que o item estiver completamente oculto. Será removido assim que o item começar a aparecer.
`gridzyItemHiddenToVisible`	Será definido assim que o item começar a aparecer (exceto quando aparecer pela primeira vez – veja a classe `gridzyItemInitialToVisible` ). Será removido assim que o item estiver completamente visível.
`gridzyItemVisibleToVisible`	Será definido assim que algo na grade mudar, mas o item em si era e permaneceria visível. Será removido assim que a animação de mudança for concluída.

Por padrão, o indicador de processo e as animações para imagens que aparecem e desaparecem são predefinidos pelo arquivo CSS principal do Gridzy.

Com essas classes CSS mencionadas acima, você pode estilizar seu próprio indicador de processo e animações. Ouse dar uma olhada no arquivo CSS principal do Gridzy para entender o que você teria que sobrescrever. Não tenha medo, tudo está bem documentado lá.

Otimizar o carregamento

Se você usa muitas imagens, pode ser uma boa ideia ajudar o Gridzy a construir a grade mais rapidamente.

Evite imagens saltitantes

O Gridzy precisa absolutamente da proporção de todas as imagens para calcular a grade. Esses fatos resultam em elementos saltando se algumas imagens estiverem prontas e outras não. Quanto mais imagens houver, mais irritante pode ser esse efeito.

Para evitar esse comportamento, basta definir os atributos width e height para todos os elementos img . É importante definir os valores corretos para cada imagem individual, caso contrário, as imagens ficariam distorcidas. Os valores corretos são a largura e a altura originais da respectiva imagem:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Depois disso, o Gridzy pode calcular a grade imediatamente, sem precisar saber o tamanho real das imagens.

Carregamento lento

Para carregar apenas imagens que estão na janela de visualização visível, basta seguir estes passos:

Insira os atributos width e height conforme descrito acima (certifique-se de usar os valores corretos)
Substitua todos os atributos src por data-gridzylazysrc conforme mostrado abaixo (se você também tiver atributos srcset , substitua-os por data-gridzylazysrcset ).

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Após essas etapas, as imagens serão carregadas assim que estiverem próximas ou dentro da janela de visualização.

Indicador de Processo

O indicador de processo é o pequeno ícone animado que aparece enquanto a imagem está carregando. Se você usar captions & skins , o indicador de processo será exibido automaticamente. Caso contrário, você precisa de alguns ajustes:

Coloque cada elemento img em um elemento div
(ou em qualquer outro elemento – veja HTML semântico para mais informações)
Adicione a classe gridzyImage a cada elemento img

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

Depois disso, você verá os indicadores de processo caso as imagens demorem para carregar.

Filtros

Os filtros no Gridzy são bem simples, mas poderosos. Não importa que tipo de filtro você precise, é bem provável que seja realizável. Tudo o que você precisa é de um pouco de CSS e alguns elementos de formulário HTML…

Aqui está um exemplo funcional:

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Vamos construir passo a passo

1. Primeiro precisamos da estrutura HTML usual do Gridzy e definir nomes de classe para todos os itens da galeria para que possamos filtrá-los depois

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Neste exemplo, usamos apenas uma classe para cada elemento. Mas você também pode definir várias classes para um único elemento, se esse elemento deve ser localizável por meio de vários filtros.

2. Em seguida, adicionamos alguns botões através dos quais podemos alterar os filtros e então

<button value="*">All</button>
<button value=".animals">Animals</button>
<button value=".architecture">Architecture</button>
<button value=".people">People</button>

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Em vez dos botões, você também pode usar outros elementos de formulário, como caixas de seleção, botões de opção, campos de seleção e assim por diante.

Como você pode ver, os valores dos botões são seletores CSS usuais. Assim que terminarmos, um clique em tal botão exibirá as imagens que correspondem a esse seletor CSS. Tecnicamente, ele simplesmente define a opção filter para esse valor.

Você também pode usar seletores muito mais complexos. Por exemplo :not(.animals) também funcionaria, assim como .animals.people e .animals, .people .

3. Por fim, encapsulamos os botões em um contêiner div e os vinculamos à galeria Gridzy, definindo a opção filterControls :

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Como você pode ver, também usamos um seletor CSS para a opção filterControls . O contêiner div com o atributo id serve apenas para tornar os botões mais fáceis de selecionar por meio desse seletor CSS.

É isso!

Se você preferir uma solução JavaScript, confira a API .

API

Embora o Gridzy tenha sua própria API, a maioria das coisas pode ser feita sem ela, simplesmente manipulando o DOM. O Gridzy notará isso e ajustará a grade. Mas também há uma API muito poderosa...

Manipulando o DOM

Para todas as manipulações do Document Object Model (DOM), primeiro precisamos do elemento container:

// get the container element
var gridzyElement = document.querySelector('.gridzy');

Adicionar Imagens

É importante construir e preencher completamente o novo elemento filho antes de adicioná-lo ao elemento contêiner. Caso contrário, o Gridzy não consegue detectar as dimensões corretas.

// create a new img element
var newImage = document.createElement('img');

// add src attribute (!! before you add it to the container element !!)
newImage.src = 'https://loremflickr.com/640/480';

// add it as last element to the container element
gridzyElement.appendChild(newImage);

// or as first element (or anywhere in between)
gridzyElement.insertBefore(newImage, gridzyElement.firstChild);

Remover Imagens

// remove the first image
gridzyElement.removeChild(gridzyElement.firstElementChild);

Alterar opções

// change the spaceBetween option to a specific value
gridzyElement.setAttribute('data-gridzy-spaceBetween', '10');

// change the layout option to a specific value
gridzyElement.setAttribute('data-gridzy-layout', 'waterfall');

// reset the spaceBetween option to its default value
gridzyElement.removeAttribute('data-gridzy-spaceBetween');

Mais sobre como manipular o DOM você pode encontrar em MDN web docs . Há também uma Introdução ao DOM disponível.

API proprietária

Para usar a API, primeiro precisamos da instância Gridzy, que é vinculada ao elemento contêiner Gridzy:

// get the Gridzy instance
var gridzyInstance = document.querySelector('.gridzy').gridzy;

Obter opção

// get the value of a single option
var currentLayout = gridzyInstance.getOption('layout');

Obter todas as opções

// get all option values as an object
var currentOptions = gridzyInstance.getOptions();

Definir opções

// set specific option values
gridzyInstance.setOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

// or reset options to their default values
gridzyInstance.setOptions({
  spaceBetween: null,
  layout: null
});

Aplicar filtro

Aplicar um filtro é apenas definir a opção filter que pode ser qualquer seletor CSS válido:

// set the filter to match items with class "animals"
gridzyInstance.setOptions({
  filter: '.animals'
});

// reset the filter to match all items again
gridzyInstance.setOptions({
  filter: '*'
});

// set the filter to match items without class "animals"
gridzyInstance.setOptions({
  filter: ':not(.animals)'
});

// set the filter to match items with class "animals" or "people"
gridzyInstance.setOptions({
  filter: '.animals, .people'
});

// set the filter to match items that have both classes, "animals" and "people"
gridzyInstance.setOptions({
  filter: '.animals.people'
});

Adicionar funções de retorno de chamada

DEPRECADO desde a versão 2.4.0
Em vez disso, use os Eventos modernos e mais flexíveis. Veja a próxima seção para detalhes.

~~O Gridzy.js 2 suporta algumas opções para funções de retorno de chamada. Elas podem ser definidas somente por meio da API proprietária, mas assim como outras opções:~~

// same as set other options
gridzyInstance.setOptions({
  onOptionsChanged: function() {
    // will be executed each time the options have changed.
  },
  onBeforeOptionsChanged: function() {
    // will be executed, before new options take effect.
  }
});

	~~Descrição~~
~~`onBeforeOptionsChanged`~~	~~Função de retorno de chamada que é invocada diretamente antes de definir opções.~~
~~`onOptionsChanged`~~	~~Função de retorno de chamada que é invocada diretamente após definir opções.~~
~~`onBeforeRender`~~	~~Função de retorno de chamada que é invocada diretamente antes da renderização.~~
~~`onRender`~~	~~Função de retorno de chamada que é invocada diretamente após a renderização.~~

Usar Eventos

desde a versão 2.4.0

Você pode usar eventos Gridzy exatamente como eventos JavaScript comuns:

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

Alguns eventos são disparados no elemento contêiner Gridzy e outros eventos são disparados nos elementos de itens individuais dentro do elemento contêiner.

Eventos disparados no elemento contêiner Gridzy:

	Descrição
`gridzyBeforeInit`	Incêndios antes da inicialização da galeria.
`gridzyInit`	Incêndios após inicialização da galeria.
`gridzyBeforeOptionsChanged`	Dispara antes de definir opções.
`gridzyOptionsChanged`	Dispara após definir opções.
`gridzyBeforeRender`	Incêndios antes da renderização.
`gridzyRender`	Incêndios após renderização.

Caso você perca algum evento aqui, envie uma solicitação de suporte .

event.target fornece o elemento de contêiner Gridzy.
event.detail.instance fornece a instância Gridzy.

Eventos disparados em elementos do item:

	Descrição
`gridzyItemBeforeInit`	Dispara antes da inicialização do item.
`gridzyItemInit`	Dispara após a inicialização do item.
`gridzyItemLoading`	Dispara quando o item começa a carregar.
`gridzyItemReady`	Dispara quando o item está pronto para cálculo de grade. Então a proporção é conhecida, mas a imagem ainda pode estar carregando.
`gridzyItemComplete`	Dispara quando a imagem do item é totalmente carregada.

Caso você perca algum evento aqui, envie uma solicitação de suporte .

event.target fornece o respectivo elemento de item.
event.detail.instance fornece a instância Gridzy.

API – Global

Existem algumas funções que são independentes de instâncias do Gridzy. Então não precisamos obter uma instância antes.

Obter opção padrão

// get the default value of a single option
var defaultLayout = Gridzy.getDefaultOption('layout');

Obter todas as opções padrão

// get all default option values as an object, including the default layout options of the default layout
var defaultOptions = Gridzy.getDefaultOptions();

// or get all default option values, including the default layout options of a specific layout
var defaultOptions = Gridzy.getDefaultOptions('waterfall');

Definir opções padrão

Isso não define as opções de todas as instâncias Gridzy já inicializadas, mas define a base para novas instâncias. No entanto, se uma opção de uma instância existente fosse redefinida por meio do valor null , ela usaria o novo valor padrão.

// set default option values
Gridzy.setDefaultOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

Você pode usar isso para definir opções globalmente, se você chamá-lo antes que o DOM esteja pronto. Então você não precisaria mais definir opções como atributos.

Automatismos

Enquanto todos os automatismos do Gridzy.js 2 estiverem ativos, não há necessidade dos métodos abaixo. Mas os automatismos podem ser desligados para usar o Gridzy de uma forma mais tradicional:

// disable automatic initializations
Gridzy.setDefaultOptions({
  autoInitOnDomReady: false,
  autoInitOnDomMutation: false
});

// or switch off all mutation observers
Gridzy.setDefaultOptions({
  autoInitOnDomMutation: false,
  autoSyncChildListMutation: false,
  autoSyncAttributesMutation: false,
  autoSyncChildClassMutation: false,
  autoSyncImageMutation: false
});

Algumas dessas opções não podem ser definidas via atributos data-gridzy- ou via setOptions() , por razões lógicas:

	Valor Padrão	Descrição
`autoInitOnDomReady`	`true`	Detecta elementos com classe `gridzy` no carregamento da página e os inicializa. Configurável via `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Observador de Mutações	`true`	Detecta novos elementos com a classe `gridzy` assim que eles aparecem no DOM e os inicializa. (por exemplo, ao usar transições de página) Configurável via `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Observador de Mutações	`true`	Detecta se elementos filho (imagens) são adicionados ou removidos e atualiza a grade automaticamente. Configurável via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Define se os atributos `data-gridzy-` são geralmente usados ou não. Se for `false` as opções podem ser definidas somente por meio da API proprietária. Configurável via `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Observador de Mutações	`true`	Detecta alterações de atributos `data-gridzy-` e atualiza a grade automaticamente. Também detecta se a classe `gridzyAnimated` é adicionada ou removida e se ocorrem alterações de atributo `style` . Se `useOptionAttributes` for `false` , ele detecta apenas alterações de atributo `style` . Configurável via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Observador de Mutações	`true`	Detecta mudanças de atributos `class` de todos os elementos filhos (imagens). Relevante em relação a filtros. Configurável via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Observador de Mutações desde a versão 2.5.0	`true`	Detecta mudanças de atributos `src` de todas as imagens. Relevante quando usado com React ou bibliotecas similares. Configurável via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` RedimensionarObservador desde a versão 2.6.0	`true`	Detecta alterações na largura do elemento. Relevante em relação ao design responsivo. (Antes da versão 2.6.0, um ouvinte de evento de redimensionamento de janela era usado) Configurável via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Inicializar manualmente

// initialize a new Gridzy instance
var gridzyInstance = new Gridzy(document.querySelector('.gridzy'), {
  spaceBetween: 10,
  layout: 'waterfall'
});

Destruir a instância

Em termos gerais, é o oposto de inicializar o Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sincronizar lista de crianças manualmente

// after child elements (images) are added to or removed from the DOM.
gridzyInstance.syncChildList();

Sincronizar um único elemento filho manualmente

Geralmente não é necessário, exceto em casos muito raros.

// after child elements (images) are added to the DOM and only one of them should be synced to Gridzy.
gridzyInstance.syncChild(childElement);

Sincronizar atributos manualmente

Observe que a opção useOptionAttributes deve ser true para isso.

// after data-gridzy- attributes have changed
gridzyInstance.syncAttributes();

Forçar renderização

Geralmente não é necessário, mesmo que todos os automatismos estejam desligados

gridzyInstance.render();

Plugin WordPress

Biblioteca JavaScript

Serviço