Galeria de imagens em mosaico de azulejos responsivos

Eu estava convertendo um site do WordPress em Hugo e precisava de um equivalente à galeria de imagens de azulejos do WordPress. Eu queria o estilo mosaico de ladrilhos, mas isso era um pouco complexo, pois também contém colspans. Eu inventei isso como uma alternativa. Você pode encontrá -lo aqui: ele possui uma licença WTFPL e está quase totalmente ‘codificado por vibração’. É pesado de JavaScript e não requer CSS. Ele usa uma estrutura HTML simples, conforme ilustrado abaixo: … Digite o modo de saída do modo de tela cheia. Qualquer linguagem lateral do servidor (como o PHP) pode gerar esses índices de imagem, como pode Hugo (para o qual eu criei isso). Conhecer a proporção de imagem antes de carregar as imagens evita mudanças de layout e garante uma experiência de carregamento suave. Todo esse JavaScript é apenas alguns Kilobytes, por isso carrega relativamente rapidamente. É totalmente responsivo e tem uma função de debounce que limita os redesenhos a 50ms, impedindo que ela seja pesada na CPU. Estético, ele visa 3 imagens por linha, tendo pelo menos três imagens na última linha. As imagens sempre preenchem bem e o código impede problemas de subpixel. As imagens têm um tamanho mínimo, que transforma a galeria em uma lista de imagens no celular. A margem entre as imagens é de 4px. Não dediquei um tempo para entender completamente o código, mas funciona muito bem. Se você deseja alterar este código, sugiro que você vibe essas alterações também. Aproveitar!

Fonte