Vi har rutnätlayouten för Galleriet igång. Tyvärr är lastningen lite plötslig och otäck. Detta beror på att CSS3-kolumner är utformade för att dela upp innehåll mellan var och en av kolumnerna jämnt, men bilder tar ibland en stund att ladda och har inte en bredd / höjd att använda ännu. Så när de dyker upp måste kolumnerna omorganisera sig själva.
Jag tror dock att vi kan förhindra denna olycka med lite JavaScript. Eftersom vi känner till bildens höjd och bredd kan vi skapa en ruta med rätt bildförhållande för att placeras där som platshållare. Sedan när bilden laddas ersätter vi platshållaren med bilden.
I slutet av videon är vi på rätt väg, men det är lite trasigt. Oroa dig inte, vi fixar det i nästa video.