Criar layouts de grade ordenáveis responsivos com este script
Grades customizadas são alguns dos recursos mais difíceis de criar do zero. Você pode encontrar muitos plugins de grade de alvenaria, mas eles cada um tem suas próprias limitações e requisitos.
o Roteiro Muuri é uma alternativa forte para quem precisa Elementos de grade classificáveis e responsivos com suporte por toque.
É construído sobre Velocity.js para as animações, juntamente com o Biblioteca Hammer.js para lidar com toque móvel. Muuri não exigir jQuery, por isso é um dos poucos plugins JavaScript de baunilha para interfaces de grade.
Na página principal do projeto, você encontrará um demonstração de grade bonita com todas as características. Efeitos de animação, suporte a arrastar e soltar e diferentes elementos de grade de tamanhos variados. Esta demonstração mostra o quanto você tem controle com uma grade Muuri.
Você pode escolher quais elementos exibir, baseado em classes (ou seja, filtragem), juntamente com como você deseja preencher espaços vazios.
As grades de alvenaria geralmente deixam pontos vazios porque elementos de grade nem sempre se encaixam perfeitamente. Isso é bem típico para sites maiores, como o Pinterest. Embora você possa adicionar itens de grade arrastáveis para praticamente qualquer interface controlada pelo usuário.
Pense sobre perfis sociais com layouts widgetizados e como eles funcionariam. Ou pense sobre listas de tarefas personalizadas que são executadas como aplicativos da Web progressivos em JavaScript. Na verdade, há uma ótima demonstração disso na página do Muuri mostrando uma amostra da lista de tarefas e como ela poderia funcionar como um PWA no celular.
Para começar, você só inclua todas as dependências JavaScript, junto com os scripts Muuri. Você pode puxá-los para baixo através de npm ou pegar uma cópia do repositório do GitHub.
Então você criar um elemento de grade contêiner e segmentar isso com uma nova instância do Muuri () método. É tudo muito simples e especialmente fácil de usar, copiando os trechos de código do repositório do GitHub.
Com suporte completo para todos os navegadores modernos (IE9 +) e uma interface habilitada para toque, este plugin é um dos melhores recursos para arrastar e soltar.
Aprenda mais lendo a homepage do Muuri e mexendo nas demos ao vivo. Isto é um ótimo sistema para grades dinâmicas e os seus ainda em desenvolvimento ativo, então você pode confiar que este plugin vai estar por aí a longo prazo.
