lib para layout dinâmico/mágico

[juliovedovatto]

Boa Noite pessoal.

Estou com um desafio aqui e gostaria de pedir ajuda, mais especificadamente dica de biblioteca JS para resolver.

Eu tenho essa página de um site que estou construindo, que basicamente precisa posicionar dinamicamente imagens, espalhando-as pelo container (responsivo). A idéia é elas ficarem espalhadas mesmo, sem sobrepor uma pela outra. O Demo acima dá a impressão que é 2 colunas apenas, mas na verdade dependendo pode ser 1, 2, 3 ou até 4 colunas por linha.

Essa página vai receber uma lista de items, que serão convertidos em elementos HTML, basicamente imagens de vários tamanhos. Então não é algo que posso simplesmente deixar posicionamento estático.

Pesquisando não encontrei solução viável, apenas bibliotecas para gerar layouts no estilo "masonry", o que não seria o caso aqui.

(Isso não é o que procuro)

Achei umas coisas legais, como:

• https://georgefrancis.dev/writing/generative-grid-layouts-with-quadtrees/ (achei bem criativo, mas não creio que seja o caso aqui)
• https://codepen.io/mykt0ngc0/pen/XWjgELa - trabalho em progresso, é parecido com o que busco

Estou na linha "work smart, not hard", então queria evitar ter que escrever algo do zero e preocupar com coisas como elementos colidindo, se o elemento está dentro do container, responsivo, etc.

E ae, algum de vocês passou por isso já e conseguiu resolver com uma lib?

[]'s

[kvnol]

@juliovedovatto mas você tem um layout de como gostaria que ficasse no final? seria legal ter uma referência de layout para assim ver se dá pra fazer com recursos nativos de css ou buscar uma lib.

[juliovedovatto]

@kvnol o layout é como exatamente está no gif, apenas um container ocupando toda viewport, porém tem que espalhar as imagens de uma maneira mais aleatória.

Veja se isso lhe ajuda a entender.

[felquis]

Adorei a ideia de posicionar as imagens aleatoriamente no grid, acho que tentaria com uma mistura de display grid, com as columns, e nas posições, faria algum Math.random para decidir usar as classes to tailwind "Grid Column Start / End" e "Grid Row Start / End" que são classes do tailwind, mas da para vc ver o CSS aplicado e não precisa usar o tailwindcss em si.

Não sei como ficaria o resultado, ams é algo que eu tentaria.

Outra dica, é um site que contem vários demos parecidos com o que você está buscando e que mostram um tutorial de como foi feito, e dão o código, é o codrops recomendo dar uma olhada nas demonstrações deles ver se consegue inspiração de código também.