A probléma a sűrű egységek

Mielőtt rátérnék lehetőséget vázol, nézzük meg magát a problémát.

Tegyük fel, hogy egy konténer bármilyen szélességű és magasságú, amelyben a n a számos különböző blokk méretekben. A mi feladatunk az, hogy helyezze a blokkokat, hogy azok vannak nyomva a maximális egymásnak minden oldalról, azaz a predstalyali szabályos rács.

Azt felvázolt egy durva változata, amit meg kell, hogy:

Az ábra azt mutatja, hogy az egységek próbálják szorítani a rendelkezésre álló helyet, mint lehetséges, amely egy rács. Emellett meg kell vizsgálni, hogy ha a hozzáadott vagy más módon blokkok dinamikus rács ne romoljon, és fordítva, blokkokat kell mozgatni a megfelelő helyzetbe.

Az eredeti elrendezés

Az egész papírt a fő példa logikus lenne, hogy ugyanazt a jelölést. Így tettünk.

Basic HTML-kód áll konténer és nyolc blokk benne. Világosan látni kell, ha egységnyi mozog, a blokk lesz számozva megnevezéseket:

A CSS lesz:

Kivéve egyedi esetekben ettől a döntést, hogy a döntés, akkor némileg módosítja a CSS.

És most az üzletet!

Most van itt az ideje, hogy megismerjék mindenféle mechanizmusok? Nos, persze, menj!

Lebegő egységek (float'y)

Az első dolog, ami eszembe jutott, hogy csomag a blokkok segítségével lebegő elemek, azaz jó öreg float'ov. Ezért aztán egy kicsit változtatni a CSS javára ezt az opciót, hanem adjunk a választó .item szabály float: left; és mi jön belőle.

Több vizsgálati eredmény azonnal in vivo például létrehozott Codepen:

Ha hogy kevesebb, mint / nagyobb, mint a szélessége a képernyőn, akkor láthatjuk, hogy a blokkok és próbál beilleszkedni a térben, félszegen összenyomjuk a jogot, ami egy csomó szabad területeket.

Miért történik ez? A tény az, hogy a specifikáció szerint. pontosan milyen mechanizmus működik úszik. A mi esetünkben, mivel alapértékeket float: left;. balra mozgatható elem kell balra, és akár a lehető legnagyobb teret is. Ha a készülék nincs elég hely (pl. A szélessége nagyobb, mint a rendelkezésre álló hely), akkor alá süllyed a régióban, ahol a méretei lehetővé teszik, hogy illeszkedjen, és rányomjuk az első alkalom, hogy blokkolja, hanem például esik még alacsonyabb és töltse ki az üres terület, amely különösen előnyös vonatkozásában szoros csomagolási egység.

mert lebegő mechanizmus nem tervezték, hogy különben nyereséges módja számunkra, akkor ez a lehetőség, sajnos, nem illik hozzánk, mert létrehoz túl sok üres helyet és csomagoló ládák néz rongyos és csúnya. Szóval nézzük a megoldást tovább ...

Váltakozó blokkok lebegő

Miközben írtam ezt a cikket, a kollégám Ilya Streltsyn (@ SelenIT2) felajánlotta, hogy teszteljék egy másik lehetőséget. Ennek lényege, hogy különböző elemeinek értéke úszó, attól függően, hogy a páros és páratlan pozícióját a tartályban, például egy még lebegnek. balra, és a furcsa úszó. jobbra. Így tettem:

És ez lett belőle:

Ami engem illet, ez a változat tűnik, nem jobb, mint az előző, mert, mint látható az eredmény, csak blokkok különböző irányokba értékétől függően az úszó, és a közepén a tartály üres területek. Ez különösen jól látható a teljes képernyős példában.

Akkor biztosan kérni minden egység a csomagolást, de ebben az esetben azt kell világosan tudja, a mérete minden egység, a helyét a patak és ugyanazon dolog, hogy fontolja, ha hozzá dinamikus elemeket. De ez a lehetőség túl bonyolult és értelmetlen, úgyhogy perehodom a másikra.

Divatos és modern flex-box

További szerencsés a fejlesztők, akik a lehetőséget, hogy alkalmazza egy nagyon divatos, modern és lendületet a közelmúltban, flex-box technológia a projektek, biztosan fog igénybe azt.

Nézzük ismét egy kis változás a CSS tekintve flex-box'a és nézze meg az eredményt. Flexible Box maga egyszerű, de ugyanakkor nagyon erős specifikáció, és kínál számos érdekes funkciók, amit korábban csak álmodni. Például, akkor könnyen igazítsa a Flex-elem / ek a felső, középső vagy a tartály aljára, vagy az egyik mozgását a kezét, hogy megoldja a problémát egy egységes összehangolása a blokkok szélessége, és ez csak a kezdet.

Lehet, hogy nehéz elhinni, de annak ellenére, hogy a hatalom, a leírás nem tudja megoldani a problémát, és most már tudom, miért.

A flex-motor beindult, és mi tételek vált flex-elemeket, egyszerűen állítsa a tartály kijelző: flex, valamint néhány további tulajdonságai, hogy a maximális elrendezését flex-elemek a megoldás a mi problémánk.

És ez az, amit én jött:

Hogy őszinte legyek, véleményem szerint ez az eredmény még kevésbé szimpatikus, mint preduduschy segítségével float'ov. Itt látjuk, hogy a blokkok egy sorban elhelyezett egyiket a másik után, amíg van elég hely a jobb oldalon, és mikor tér elfogy, a készülék átkapcsol egy másik számot. És világosan látható, hogy minden sor egy sorban, amelynek magassága függ a magasság a leghosszabb elem benne. Ebben a tekintetben, a rugalmas elem, amely nem fér el az első sorban, lefelé mozdul a második sorban, és így mellett a legnagyobb elem az előző sorban, egymás után, és a következő elemek mögé, és így tovább.

Ie úgy tűnik, hogy a flex-elem nem szakította meg a szabályokat, a vonalaik és túlmutatnak saját határait, és ezért mindenképpen lesz egy csomó üres területek és a sűrű csomagolási egységek néz komor.

Amint döntés, hogy mi is, nem illik, meg kell nézni, hogy mások.

rácsos elrendezés

Nos, az utolsó CSS-mechanizmusok, amelyek a legalkalmasabbak az a feladatunk, és még inkább úgy dönt, az a CSS-modul Rácsos elrendezés. amely, mint a neve is mutatja, csak hálókat hanem ez is szorosan kapcsolja blokkokat. Sajnos, ebben a pillanatban, nem tudjuk alkalmazni, mert Először is, a böngésző támogatja is szűkös - csak akkor működik a böngésző IE10 + (ami fantasztikus), és a legújabb változat a Chrome, de csak akkor, ha az alábbi link chrome: // flags, és lehetővé teszik a választás „A kísérleti fejlesztési eszközök”, és a a második pedig a készülék továbbra is dolgoznak, és amikor készen áll, és minden böngésző támogatja, szintaxis nagyban változhat.

Nem írom le az összes funkcióját ezt a könyvtárat, mert minden már megtörtént velem. Csak nézd meg a legfontosabb pillanatokat.

Mielőtt megkezdené a munkát Kőműves, le kell töltenie az egyik javasolt csomag vagy masonry.pkgd.min.js (minifitsirovanny felhasználók esetén) vagy masonry.pkgd.js fájlt (fejlesztők).

Ezután csatlakoztassa a letöltött fájlt az oldalra. Ezt meg lehet tenni többféle módon, amelyek leírása az irodában. honlapján. Itt meg fogja vizsgálni a lehetőséget, amely figyelembe veszi, hogy az én projekt én jQuery. És a kapcsolat kód így néz ki:

Én csak hozzá a fájlokat rész a webhelyen.

Most már csak meg kell elindítani a motort a könyvtár, úgy, hogy az alkalmazandó a terméket. Talán észrevette, hogy van egy „tartály” id = többnyire HTML-kód mondatokat a tartályba. mint ők maguk mutatnak osztály .item. Ez nekik utalunk hívni Kőműves:

Ez minden, ami szükséges a hívást. És itt az eredmény:

Véleményem szerint ez még semmi. Függetlenül attól, hogy a képernyő mérete, csomagolva rendesen. próbálják szorítani a szabad területet, amennyire csak lehetséges. Emiatt majdnem üres terek maradnak. Tehát nyugodtan mondhatjuk, hogy ez a JS-könyvtár megbirkózott a mi feladatunk.

Ahhoz azonban, hogy játszani Kőműves, találtam néhány érdekes árnyalatokat, amit szeretnék megosztani.

Kezdjük azzal a ténnyel, hogy ez a könyvtár egyik nepriyatnayu funkciót. Ha a szélessége és magassága a elemek százalékban adjuk (vagy azok feszített tartalmától függően), majd az inicializálási falazat egyes elemek összeragadnak vízszintesen. Ez a viselkedés látható a következő képen:

Ezt a problémát oldja nagyon könnyen:

Egyszerűen csavarja a hívás egy külön könyvtár funkciója, majd hívja meg kétszer, az első alkalommal az inicializálási masonryFunc (). és a második hívást a setTimeout időzítőt. ahhoz, hogy a könyvtár néhány milliszekundum (300 ms egészen jött le). Ez megoldja ezt a problémát.

A függvényhívás egy paraméterének «columnWidth». Mint a neve is mutatja, arra szolgál, hogy állítsa be a szélességét az egyes oszlopok. Ez a paraméter több vízszintes rács elrendezést. poeotomu esetünkben a maximális blokkok egymáshoz szorítva vízszintesen, úgy döntöttem, hogy nem lenne helyes, hogy ezt az értéket „1”, azaz, a lehető legkisebb.

Van is egy lehetőség «ereszcsatorna», amely köteles elhelyezni vízszintes távtartó elemek. Ez a paraméter is, mint preduduschy szolgál műsorrácsból. ezért úgy gondolom, hogy ez lenne a logikus, hogy használja azt, hanem a jó öreg árrés. definiált vízszintes és függőleges padding blokkok közötti (pl árrés: 10px 10px 0 0 ;.).

Ez az!

Ui Azt is érdekelhetnek:

Ne félrevezetik az embereket.

Mielőtt írni egy cikket, még ellenőrizni kell.

Nem is olyan régen találkozott egy hiba, így irányító Kőműves - idézet: „Ha a szélesség és a magasság az elemek százalékban adjuk (vagy azok megnyúlnak tartalmától függően), akkor Kőműves inicializálja egyes elemek összetartanak vízszintesen.”

Csak egyetlen kikötés - Volt egy kép minden egyes blokk, és miközben ők betöltve, a plug-in „görbe” lenyugodott blokkokat.

És ő is próbálta megoldani a problémát újrainiciaiizáiásakor bővítmény a késés ...

FAIL - az asztali számítógépeken is lovagolt, de a késedelmes .2s vizuálisan látható. De a mobil eszközök, különösen iPhone6 ​​(bizonyult a fék), akkor ez a késedelem nem volt elég!

Úgy döntött, a kérdés másképp, lógott egy eseményt az img tag onload, amely kezdeményezte a bővítmény minden boot image, és nincs késés (vizuálisan). A jó hír az, hogy a plugin „emlékszik” az összes elemet a fékek és nem találták meg, még egy lassú iPhone6.

Úgy tűnik, hogy két éven Kőműves valami történt. Van, hogy a króm (59), amely fayrfoks (56) az összes blokkot a codepen'ovskom például bottal a bal szélén, és egyáltalán semmi van töltve. Most úgy néz ki, mint a legrosszabb példa csomagolási egységek: D

Jó hír a Microsoft: csak néhány órával ezelőtt, az állapota a, valószínűleg a népszerű kérelmet az Edge-fejlesztők - frissíteni végrehajtásának CSS-hálózatok, hogy megfeleljen a tényleges leírás - változott „A fejlesztés”, hogy „Elérhető a megtekintett” (pontosabban a Windows 10 Insider megtekintése építeni 16226) ....
TÖBB