Masonry elrendezés

A masonry elrendezés bármelyik elrendezéselemre (Szakasz, Tároló, Blokk, Div) rákapcsolható. A vezérlők a Stílus → Elrendezés → Masonry részben vannak.

https://minta-bolt.hu/home/?bricks=run

A képen a bekapcsolt Masonry elrendezés kapcsoló alatt az Oszlopok és a Térközök mező látszik, lejjebb az animáció beállításai.

A Bricks az IsotopeJS könyvtárat használja hozzá, ugyanazt, mint a Képgaléria és a Bejegyzések elem.

Hogyan működik

Bekapcsolt masonry elrendezésnél az elem összes közvetlen gyermeke masonry elem lesz. Az oszlopok számát és a térközöket töréspontonként külön megadhatod, így az elrendezés reszponzív marad.

A masonryt lekérdezési ciklus elemeit körbefogó elemen is használhatod: így a bejegyzések, termékek vagy más ismétlődő tartalom lépcsőzetes, változatos magasságú rácsban jelenik meg.

Saját interakciós animáció használata

Ha a gyermekelemeken az Interakciók panelen saját animációt adsz meg (például belépés a nézetbe indító eseménnyel), a masonry alapanimációját kapcsold ki: az Átmenet: Időtartam értéke legyen 0. Így a két animáció nem akad össze, és a hatás simább lesz.

Hibaelhárítás

Egyéni CSS ütközik a beállítással

Ha a masonry oszlopok nem a beállításnak megfelelően helyezkednek el, nézd meg a gyermekelemekre alkalmazott CSS-t. Az olyan stílusok, mint a width, a flex-basis vagy az align-self flex elrendezésben felülírhatják az oszlopbeállításokat. Módosítsd vagy töröld őket.

Tartalom hozzáadása egyéni JavaScripttel vagy AJAX-szal

Ha saját kód vagy bővítmény JavaScripttel vagy AJAX-szal ad hozzá új gyermekelemeket, a masonry elrendezés előfordulhat, hogy nem frissül. Ilyenkor a masonry példányt kézzel frissítheted:

bricksUtils.updateIsotopeInstance('BRICKS_ID');

A 'BRICKS_ID' helyére a masonry elem azonosítóját írd. A függvény újraindítja az elrendezést, hogy az új elemek is beilleszkedjenek.