Ce au în comun francmasonii și JavaScript? Zidărie - scoaterea de blocuri html ca zidărie de zidărie nu funcționează.

Salutare tuturor! Astăzi aș vrea să vorbesc despre cum, fără pluginuri și scripturi, puteți face blocuri sub formă de cărămidă (zidărie în engleză - cărămidă), adică blocuri de diferite înălțimi vor fi așezate frumos unul sub celălalt, fără spații goale mari. Da! Toate acestea se pot face foarte ușor folosind css.

Există o proprietate în css cu care puteți crea text cu mai multe coloane sau blocuri. O vom folosi.

Proprietatea se numește coloane.

Aceasta este o proprietate universală care vă permite să setați imediat lățimea și numărul de coloane. Puteți citi mai multe despre el într-o carte bună de referință CSS.

Deci, este de fapt foarte simplu. De exemplu, avem 6 elemente de înălțimi diferite, dar de aceeași lățime. Un exemplu izbitor este bara laterală (coloana laterală) de pe site-uri web. Aici toate blocurile au aceeași lățime, dar înălțimi diferite. De obicei, în versiunea mobilă a site-ului, bara laterală este plasată după conținutul principal, în partea de jos a site-ului, iar conținutul în sine este făcut să umple întreaga lățime a ecranului. Desigur, este, de asemenea, irațional să plasați o bară laterală într-o coloană, deoarece va fi mult spațiu liber pe părțile laterale, mai ales când este vizualizată de pe o tabletă.

Dar, dacă setați afișarea: proprietatea inline-block la blocuri, atunci acestea vor fi aranjate automat, dacă lățimea containerului este suficientă, în mai multe coloane. Cu toate acestea, lucrurile s-ar putea să nu arate foarte frumos:

De acord, aceste indentări între blocuri nu arată deloc bine. Prin urmare, acest lucru trebuie rezolvat urgent! Pentru a face acest lucru, trebuie să adăugați stilurile necesare la blocul container în care se află blocurile:

Moz-coloane: 300px automat; -webkit-coloane: 300px auto; coloane: 300px automat;

Pentru compatibilitatea între browsere, folosim proprietăți pentru browserele Firefox și Webkit (Chrome, Safari, Android). De exemplu, vom aranja blocurile folosind o listă cu marcatori, apoi stilurile pentru exemplul din imagine vor arăta astfel:

În acest caz, blocurile vor fi aranjate în mai multe coloane cu o lățime minimă de 300px, iar numărul de coloane va fi determinat automat de browser. Acest lucru este util pentru a crea adaptabilitate. În acest caz, vor fi 3 coloane și așa va arăta:

Va trebui să selectați lățimea containerului (1050px) dacă doriți ca distanța verticală dintre blocuri să coincidă cu distanța orizontală. În caz contrar, lățimea dintre coloane va fi setată automat de browser. Există o proprietate column-gap care specifică distanța dintre coloane. Dar în acest caz nu va funcționa așa cum doriți.

Există o altă opțiune: pentru blocuri trebuie să setați proprietatea lățimea:100%. De asemenea, dacă proprietatea de umplutură este setată, ca în cazul meu, atunci trebuie să setați proprietatea box-sizing: border-box. Acum puteți adăuga în siguranță proprietatea column-gap în container pentru a seta distanța dintre coloane. În acest fel, va funcționa așa cum ar trebui.

De acord, așa arată mult mai bine! De asemenea, puteți plasa blocuri „div” în interiorul unui container „div”. Sau, dacă trebuie să distribuiți textul în mai multe coloane, adăugați pur și simplu textul necesar la eticheta „p” cu, de exemplu, clasa „text” și setați proprietatea coloane pentru această clasă.

Asta este! Deci, simplu, fără scripturi inutile, puteți aranja blocuri sub formă de cărămidă sau text în mai multe coloane. Dar rețineți că în acest caz va arăta frumos doar dacă blocurile au aceeași lățime. În caz contrar, tot ce rămâne este să folosești un scenariu bun de zidărie. Scriptul poziționează automat în mod absolut fiecare bloc. Dar asta e un alt subiect...

Asta e tot! Dacă aveți întrebări sau comentarii, lăsați-le în comentarii. Noroc!

Ați întâlnit site-uri în care într-un container sunt expuse blocuri de diferite dimensiuni, umplând spațiul cât mai eficient posibil?

Scriptul lui David DeSandro, care se numește Masonry (din engleză, cărămidă), vă permite să faceți această concluzie. Puteți vedea și un exemplu clar pe site-ul oficial al scriptului.

Masonry este o bibliotecă Javascript care vă permite să afișați blocuri HTML într-o formă compactă, pliată. Scriptul analizează înălțimea fiecărui bloc și îl plasează cât mai puțin posibil.

Poate că cineva a auzit de ea de multă vreme și chiar a folosit-o în proiectele lor, dar am dat peste ea pentru prima dată recent. Nu pot spune că toată lumea poate trage cu ușurință vreo concluzie. Dar cred că toată lumea poate face față utilizării de bază. Nu este atât de ușor să-ți dai seama ce și cum funcționează acolo, dar nici nu pot spune că este foarte dificil. Dacă sunteți bine versat în JS, atunci orice ieșire ar trebui să funcționeze. Scopul acestei postări este să vă prezinte Masoneria și să vă lăsați o notă despre aceasta.

Masonry funcționează independent, fără a utiliza biblioteci, dar poate fi folosit și ca plugin jQuery.

În această postare voi traduce pagina principală a off-site-ului, care explică cum să începeți să lucrați cu scriptul.

Zidăria în Javascript Conectarea zidăriei

Aceste pachete de instalare conțin tot ce aveți nevoie pentru a utiliza Masonry:

function mason_script() ( // wp_register_script("masonry", "/path/to/masonry.pkgd.min.js"); // linia de sus nu este necesară deoarece WordPress vine cu zidărie în mod implicit, așa că vă puteți conecta doar it. wp_enqueue_script("masonry");
HTML
... ... ... ...
Zidăria funcționează cu elemente de container care au aceeași clasă de articole:
Puteți specifica orice clasă, principalul lucru este să specificați opțiunea itemSelector atunci când apelați: „.item” .
CSS
Pentru blocurile container, trebuie să specificați lățimea. Lățimea trebuie selectată în funcție de container și de parametrul columnWidth (lățimea coloanei):
Articol ( lățime: 25%; ) .item.w2 ( lățime: 50%; )
Activarea zidăriei (inițializare)
Pentru ca scriptul să înceapă să funcționeze, acesta trebuie să fie aplicat containerului nostru. Rularea scriptului ca o instanță în javascript pur face acest lucru:
Var container = document.querySelector("#container"); var msnry = zidărie nouă (container, ( // setări ColumnWidth: 200, itemSelector: ".item" ));
În acest caz, constructorul instanței conține 2 argumente: columnWidth (lățimea coloanei) și itemSelector (clasa de blocuri din containerul cu care va lucra Masonry). Acestea nu sunt toate opțiunile, vezi restul în documentație sau mai jos pe această pagină.
Inițializare prin HTML

Masonry poate fi lansată fără a utiliza Javascript, direct din HTML, prin specificarea clasei js_masonry în container și specificând opțiunile din atributul data-masonry-options:
Opțiunile setate în HTML trebuie să fie în format JSON. Argumentele trebuie să fie între ghilimele „itemSelector”: . Vă rugăm să rețineți că valoarea atributului HTML trebuie să fie între ghilimele simple " deoarece proprietățile JSON folosesc ghilimele duble " .
Nu aveți nevoie de jQuery pentru a utiliza Masonry, dar dacă vă simțiți mai confortabil să lucrați cu jQuery, masonry funcționează cu el ca un plugin.
Var $container = $("#container"); // Inițializare $container.masonry(( columnWidth: 200, itemSelector: ".item" ));
Pentru a obține instanța, utilizați metoda .data(„masonry”):
Var msnry = $container.data("zidarie");
Inițializare pentru blocuri de imagini
Deoarece imaginile sunt încărcate separat de codul HTML, utilizarea „Masonry” pentru blocuri cu o imagine provoacă de obicei o eroare - un bloc se suprapune pe altul. Acest lucru se întâmplă deoarece Zidăria se declanșează înainte ca imaginea din bloc să fie încărcată, înălțimea blocului este setată, iar apoi imaginea „distruge” această înălțime. Există mai multe moduri de a rezolva această problemă:
Metoda 1
Setați dimensiuni rigide pentru toate imaginile: lățime și înălțime în pixeli.
Metoda 2
Agățați procesarea zidăriei la evenimentul de încărcare. Cod jQuery:
JQuery(window).load(function())( jQuery(".masonry").masonry(( columnWidth:310, itemSelector:".box, .item" )); ));
Dezavantajul acestei metode este că cel mai probabil va trebui să așteptați ca întreaga „fereastră” să se încarce: jQuery(window).load . Folosirea încărcării numai pe un element este rareori acceptabilă, deoarece jQuery o va interpreta ca o funcție de încărcare AJAX. Pentru a evita acest lucru, utilizați al treilea exemplu.
Metoda 3
Inițializați lucrarea masoneriei după ce toate imaginile au fost încărcate. Și pentru a verifica încărcarea, utilizați scriptul JS imagesLoaded suplimentar. Cod:
Var container = document.querySelector("#container"); var msnry; // Initializeaza Masonry, dupa incarcarea imaginilor imagesLoaded(container, function() ( msnry = new Masonry(container); ));
Cod jQuery:
Var $container = $("#container"); // Inițializați Zidăria după încărcarea imaginilor $container.imagesLoaded(function() ( $container.masonry(); ));
Notă: poate apărea și o eroare atunci când utilizați fonturi suplimentare, așa că trebuie să verificați încărcarea fonturilor.
Proprietăți
Proprietățile necesare sunt: columnWidth și itemSelector . Toate celelalte pot fi folosite după cum doriți:
ItemSelector (șir) (obligatoriu) Determină ce element copil al containerului va fi utilizat la construirea zidăriei. Elementul trebuie specificat pentru a exclude alte elemente container care sunt folosite pentru a seta dimensiuni, vezi „ColumnWidth”: „.grid-sizer” .
Implicit: nu columnWidth (număr/element/selector ca șir) (obligatoriu) Lățimea coloanei în pixeli: „ColumnWidth”: 60 . Dacă setați un selector sau un element, masonry va folosi lățimea elementului setat: „columnWidth”: „.gutter-sizer” Masonry calculează lățimea exterioară a blocurilor, ținând cont de proprietățile css chenar, padding, margin.
Implicit: nu containerStyle (obiect) Stiluri CSS care sunt aplicate containerului. Pentru a anula aplicarea stilurilor de zidărie la un container, specificați containerStyle: null
Implicit: (poziție: „relativ”) jgheab (număr/element/selector ca șir) Spațiu dintre elemente, similar cu marginea-dreapta . Exemplu: „jgheab”: 10
Implicit: 0 hiddenStyle (obiect) Stiluri aplicate elementelor ascunse.
Implicit: ( opacitate: 0, transformare: „scale(0.001)” ) esteFitWidth (logic) Setează lățimea containerului la numărul disponibil de coloane, calculat din lățimea elementelor containerului. Odată setat, puteți centra containerul prin CSS. Nota: această proprietate nu funcționează dacă lățimea elementelor containerului este setată la %, trebuie să fie în pixeli: lățime: 120px . De asemenea, opțiunea columnWidth ar trebui să fie setată la o valoare fixă, de exemplu: columnWidth: 120 .
Implicit: false isInitLayout (logic) Activează reglarea blocurilor în timpul inițializării. Setați la false pentru a împiedica scriptul să construiască o cărămidă la inițializare, astfel încât să puteți utiliza metode și să adăugați evenimente înainte de a procesa elementele containerului.
Implicit: adevărat esteOriginLeft (logic) Controlează aranjarea orizontală a blocurilor. În mod implicit, blocurile sunt aranjate de la stânga la dreapta. Setați la fals pentru a aranja blocurile de la dreapta la stânga.
Implicit: adevărat esteOriginTop (logic) Controlează aranjarea verticală a blocurilor. În mod implicit, blocurile sunt aranjate de sus în jos. Setați la fals, astfel încât blocurile să fie aranjate de jos în sus.
Implicit: adevărat isResizeBound (logic) Legăturile blochează plasarea la modificările dimensiunii ferestrei.
Implicit: adevăratştampila (element/matrice de elemente/selector de șir/NodeList) Determină ce blocuri trebuie să fie comise în timpul ieșirii. Acestea sunt elemente speciale cărora nu se va aplica efectul de zidărie. "stamp": ".stamp"
Implicit: nu Durata tranziției (linia) Durata tranziției (viteza animației) când blocurile își schimbă poziția sau apar. Trebuie setat în format de timp pentru CSS. Pentru a anula toate animațiile setate la 0: Durata tranziției: 0
Implicit: „0,4s” vizibilStyle (obiect) Stiluri care vor fi aplicate la afișarea elementelor ascunse.
Implicit: ( opacitate: 1, transformare: „scale(1)” )
Zidărie în CSS pur
Recent, aproape toate browserele înțeleg proprietatea de numărare a coloanelor CSS.

Și dacă da, atunci nu mai este nevoie să conectați javascript și puteți face blocuri Masonry folosind css pur. Desigur, această opțiune este mai puțin flexibilă în setări, dar este mult mai simplu și mai rapid de instalat și mai ușor de înțeles.

Ideea este aceasta.

Avem acest cod HTML:
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
... ... ...
Și conectăm următoarele stiluri CSS pentru el:
/* Container of Masonry blocks */ .masonry ( column-count: 4; // de câte coloane sunt necesare? column-gap: 1em; // distanță între blocuri (dreapta sau stânga) /* la fel cu prefixele necesare ca din 18 martie 2016 * / -webkit-column-count: 4 -moz-column-count: 4 -webkit-column-gap: 1em /* Masonry blocks */ .masonry .item ( display: inline-block; ; // importantă: 100%;
Această opțiune are o mulțime de dezavantaje

Să trecem peste dezavantajele acestei metode și cum este inferioară zidăriei.

Suportul pentru browser este excelent astăzi (2016), dar încă nu este complet...

Orice animație va trebui finalizată manual.

Principalul dezavantaj al numărării coloanei și, de fapt, motivul pentru care această metodă nu poate fi folosită în locul zidăriei în majoritatea cazurilor este direcția blocurilor.
1 2 3
4 5 6

Dacă zidăria citește orizontal:
1 3 5
2 4 6

Apoi, în număr de coloană pe verticală:

Utilizarea acestei abordări dintr-o perspectivă cronologică nu este o opțiune.
In sectiunea blog. Această temă foto WordPress va fi exemplul nostru, dar probabil ați văzut jQuery Masonry folosit pe alte site-uri WordPress.
Ce este jQuery Mansory

Zidaria poate fi considerata un plus la css, cu ajutorul caruia puteti aranja elementele pe orizontala, trecand in pozitie verticala in functie de latimea monitorului. Ca urmare, golurile verticale dintre elementele de diferite înălțimi sunt minimizate. Dacă vrei să faci același lucru folosind css, crede-mă, vei avea foarte multe bătăi de cap.

În acest exemplu, puteți vedea cum funcționează jQuery Masonry înainte și după utilizare:
După cum puteți vedea clar rezultatul, dacă utilizați css float: stânga, apoi rămân spații goale, trebuie să utilizați poziția css, ceea ce este destul de problematic de configurat, este posibil, DAR de ce, Masonry nu vă va ajuta cu acest lucru.
Utilizarea jQuery Mansory pe site-urile WordPress

jQuery(document).ready(function($)( $("#content_masonry").masonry(( singleMode: true )); ));

$("#conținut_zidărie"). zidărie((singleMode:true));
} ) ;

Dacă aveți blocuri de lățimi diferite, trebuie să utilizați următorul cod:

jQuery(document).ready(function($)( $("#content_masonry").masonry(( columnWidth: 300 )); ));

jQuery (document). gata(funcție($)(
$("#conținut_zidărie"). zidărie((ColumnWidth: 300));
} ) ;

Unde columnWidth este lățimea grilei (în pixeli). Zidăria va respecta aceste două reguli:
Lățimea totală a elementului (calculată folosind această formulă) = lățime CSS + padding-right+ padding-left + border-right-width + border-left-width + margin-right+ margin-left
Când utilizați columnWidth, toate elementele trebuie să fie poziționate orizontal pentru a calcula lățimea ColumnWidth (de exemplu, pentru ColumnWidth: 200, elementele vor începe de la 0 sau 200 sau 400 pixeli și așa mai departe). Acest lucru poate să nu fie complet clar, dar nu este nimic complicat, uitați-vă la imagine.

Primul element are o lățime totală de 190px și margin-right: 0. Iar al doilea element are margin-left: 0, în teorie aceste două elemente ar trebui să se atingă. Dar, deoarece ColumnWidth este setată la 200px, al doilea element începe să apară la o distanță de 200px.

Acest proces nu se va întâmpla dacă nu avem o valoare ColumnWidth în script și toate elementele încep unul după altul, așa că este necesar să le separăm folosind margine.

Acum hai să facem puțină codare. Mai întâi, să includem bibliotecile jQuery și Masonry necesare în fișierul header.php. Plasați acest cod în header.php ( îl puteți descărca de pe site-ul extern):

//conectați jQuery