Máme rozložení mřížky pro galerii. Načítání je bohužel trochu prudké a rozvážné. Důvodem je, že sloupce CSS3 jsou navrženy tak, aby rovnoměrně rozdělily obsah mezi každý ze sloupců, ale načítání obrázků někdy trvá chvíli a ještě nemají šířku / výšku k použití. Když se tedy objeví, sloupce se musí reorganizovat.
Myslím si, že můžeme tomuto šílenství zabránit pomocí nějakého JavaScriptu. Protože známe výšku a šířku obrázků, můžeme vytvořit rámeček se správným poměrem stran, který tam umístíme jako zástupný symbol. Když se načte obrázek, nahradíme zástupný symbol obrázkem.
Na konci videa jsme na správné cestě, ale je to trochu rozbité. Nebojte se, v dalším videu to napravíme.