CSS Grid Masonry Paigutus: Pinterest-stiilis Küljenduste Loomine

Masonry-küljendused, mida on populariseerinud platvormid nagu Pinterest, pakuvad visuaalselt köitvat ja ruumisäästlikku viisi erineva suurusega sisu kuvamiseks. Traditsiooniliselt nõudis sellise paigutuse saavutamine JavaScripti teeke. Kuid CSS Gridi ja eriti grid-template-rows: masonry omaduse (mis on veel eksperimentaalne, kuid saadaval brauserites nagu Firefox) tulekuga on masonry-küljenduste loomine muutunud oluliselt lihtsamaks ja jõudsamaks.

Masonry-küljenduse Algoritmi Mõistmine

Masonry-küljenduse põhiidee on paigutada elemendid veergudesse, minimeerides tühja ruumi. Erinevalt tavalisest ruudustikust ei joondu elemendid tingimata täiuslikult ridades. Algoritm töötab sisuliselt järgmiselt:

1. Veergude Laiuste Arvutamine: Määrake optimaalne veergude arv, lähtudes olemasolevast ekraanilaiusest ja soovitud minimaalsest veeru laiusest. CSS Gridi auto-fit või auto-fill võtmesõnad grid-template-columns sees on siin üliolulised.
2. Elementide Paigutamine: Käige elemendid läbi, paigutades iga elemendi kõige lühemasse veergu. See tagab sisu suhteliselt ühtlase jaotumise kõikide veergude vahel.
3. Dünaamiline Kohandamine: Kui brauseriakna suurust muudetakse, arvutatakse veergude laiused uuesti ja elemendid jaotatakse potentsiaalselt ümber, et säilitada optimaalne vahe ja visuaalne tasakaal.

Kuigi CSS Grid koos grid-template-rows: masonry omadusega tegeleb 2. ja 3. sammuga automaatselt, aitab aluseks oleva algoritmi mõistmine optimeerida sisu ja disaini parima võimaliku kasutajakogemuse saavutamiseks.

Masonry-küljenduse Rakendamine CSS Gridiga

1. Põhiline HTML Struktuur

Alustage lihtsa HTML-struktuuriga. Konteinerelement hoiab kõiki elemente, mis paigutatakse masonry-küljendusse.

            <div class="masonry-container">
  <div class="masonry-item"><img src="image1.jpg" alt="Pilt 1"></div>
  <div class="masonry-item"><img src="image2.jpg" alt="Pilt 2"></div>
  <div class="masonry-item"><img src="image3.jpg" alt="Pilt 3"></div>
  <!-- Veel elemente -->
</div>
            

              
                Copy
              
            
          

2. CSS Gridi Konfigureerimine

Rakendage konteinerelemendile järgmised CSS-reeglid:

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 10px;
  grid-template-rows: masonry;
}

.masonry-item {
  break-inside: avoid;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}
            

              
                Copy
              
            
          

Vaatame CSS-i lähemalt:

• display: grid;: Lubab konteinerile CSS Gridi paigutuse.
• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));: See on reageerivate veergude loomise võti.
• repeat(auto-fit, ...): Loob automaatselt nii palju veerge kui võimalik, mis mahuvad konteinerisse. Kui konteiner on tühi, varisevad veerud kokku.
• repeat(auto-fill, ...): Loob automaatselt nii palju veerge kui võimalik, mis mahuvad konteinerisse, lisades isegi tühje veerge, kui nende täitmiseks pole piisavalt elemente.
• minmax(250px, 1fr): Iga veerg on vähemalt 250 pikslit lai. Kui on lisaruumi, laienevad veerud, et täita saadaolev ruum proportsionaalselt. Kohandage 250px väärtust vastavalt oma disaininõuetele.
• auto-fill kasutamine auto-fit asemel võib olla kasulik, kui soovite, et ruudustik näitaks tühje veerge, kui saadaoleva ruumi täitmiseks pole piisavalt elemente. Enamikus masonry-küljendustes eelistatakse siiski auto-fit.
• grid-gap: 10px;: Lisab ruudustiku elementide vahele 10-pikslise vahe.
• grid-template-rows: masonry;: See on ülioluline omadus, mis võimaldab masonry-küljenduse algoritmi. See annab ruudustikule käsu paigutada elemendid viisil, mis minimeerib tühja vertikaalset ruumi. See on praegu eksperimentaalne ja võib mõnes brauseris nõuda tootjaprefikseid või eksperimentaalsete veebiplatvormi funktsioonide lubamist. Novembri 2024 seisuga on see toetatud Firefoxis lipu taga ja seda kaalutakse standardiseerimiseks kõigis brauserites.
• break-inside: avoid;: Takistab elementide jagunemist veergude vahel printimisel või mitmeveeruliste paigutuste kasutamisel. See on oluline elementide koos hoidmiseks.
• .masonry-item img: Tagab, et elementide sees olevad pildid skaleeruvad korralikult, et sobituda oma konteineriga.

3. Erineva kuvasuhtega piltide käsitlemine

Masonry-küljenduste peamine omadus on võime mahutada erineva suuruse ja kuvasuhtega elemente. Ülaltoodud kood tegeleb põhilise seadistusega, kuid soovitud ilme saavutamiseks võite soovida piltide suurust või kuvasuhet täiendavalt kohandada. Üks lähenemine on kasutada CSS-i object-fit omadust.

            .masonry-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* või contain, fill, scale-down */
}
            

              
                Copy
              
            
          

• object-fit: cover;: Kärbib pilti konteineri täitmiseks, kaotades potentsiaalselt osa pildist, kuid tagades, et see katab kogu ala.
• object-fit: contain;: Skaleerib pilti, et see mahuks konteinerisse, säilitades kuvasuhte. See võib tekitada elemendi sisse tühja ruumi.
• object-fit: fill;: Venitab pilti konteineri täitmiseks, moonutades potentsiaalselt pilti.
• object-fit: scale-down;: Skaleerib pildi alla contain väärtuseni, kui see on konteinerist suurem, vastasel juhul kuvab selle algses suuruses.

Valige object-fit väärtus, mis sobib kõige paremini teie sisu ja disaini eesmärkidega.

Polüfillimine Brauseritele, mis Natiivset Tuge Ei Paku

Kuna grid-template-rows: masonry on endiselt eksperimentaalne, on oluline pakkuda varulahendust brauseritele, mis seda veel ei toeta. Siin tulevad appi JavaScripti teegid. Populaarsed valikud on järgmised:

• Masonry.js: Laialdaselt kasutatav ja hästi dokumenteeritud JavaScripti teek, mis on spetsiaalselt loodud masonry-küljenduste loomiseks.
• Isotope: Täiustatum teek, mis pakub lisaks masonry-küljendustele ka filtreerimist, sortimist ja muid funktsioone.

Siin on põhiline näide, kuidas Masonry.js-i integreerida:

1. Kaasake Masonry.js: Lisage Masonry.js teek oma HTML-faili.

            <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
            

              
                Copy
              
            
          

2. Initsialiseerige Masonry: Kasutage JavaScripti, et initsialiseerida Masonry paigutus pärast DOM-i laadimist.

            <script>
  window.onload = function() {
    var elem = document.querySelector('.masonry-container');
    var msnry = new Masonry( elem, {
      // valikud
      itemSelector: '.masonry-item',
      columnWidth: 250
    });
  };
</script>
            

              
                Copy
              
            
          

See kood valib .masonry-container elemendi ja initsialiseerib Masonry, määrates elemendi valija ja veeru laiuse. Kohandage columnWidth valikut, et see vastaks teie CSS-is kasutatud minmax väärtusele.

Tingimuslik Laadimine

Et tagada Masonry.js-i laadimine ainult siis, kui see on vajalik, saate kasutada funktsioonituvastust, et kontrollida, kas brauser toetab grid-template-rows: masonry.

            <script>
  if (!('gridTemplateRows' in document.body.style)) {
    // Laadige Masonry.js, kui CSS Grid masonry pole toetatud
    var script = document.createElement('script');
    script.src = 'https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js';
    script.onload = function() {
      var elem = document.querySelector('.masonry-container');
      var msnry = new Masonry( elem, {
        itemSelector: '.masonry-item',
        columnWidth: 250
      });
    };
    document.head.appendChild(script);
  } else {
      // CSS Grid masonry on toetatud
      console.log("CSS Grid Masonry on toetatud!");
  }
</script>
            

              
                Copy
              
            
          

Masonry-küljenduste Optimeerimine Jõudluse Jaoks

Masonry-küljendused võivad jõudlust mõjutada, kui neid hoolikalt ei rakendata. Siin on mõned optimeerimisnõuanded:

• Piltide Optimeerimine: Optimeerige oma pildid veebi jaoks, et vähendada failisuurusi. Kasutage tööriistu nagu TinyPNG või ImageOptim, et pilte tihendada ilma märkimisväärse kvaliteedikaota. Kaaluge reageerivate piltide kasutamist <picture> elemendi või srcset atribuudiga, et pakkuda erinevaid pildisuurusi vastavalt ekraani suurusele ja resolutsioonile.
• Laadimine Vajadusel (Lazy Loading): Rakendage laisklaadimist piltidele, mis pole esialgu vaateaknas nähtavad. See parandab lehe esmast laadimisaega. Kasutage oma <img> siltidel atribuuti loading="lazy" või kasutage täpsemate laisklaadimistehnikate jaoks JavaScripti teeki.
• Virtualiseerimine: Väga suurte andmekogumite puhul kaaluge virtualiseerimistehnikate kasutamist, et renderdada ainult need elemendid, mis on hetkel vaateaknas nähtavad. See võib oluliselt parandada jõudlust tuhandete elementidega tegelemisel.
• Suuruse Muutmise Sündmuste Viivitamine (Debouncing): JavaScripti kasutamisel varulahenduste jaoks viivitage suuruse muutmise sündmust (debounce), et vältida liigseid ümberarvutusi brauseriakna suuruse muutmisel. See võib ennetada jõudlusprobleeme ja parandada reageerimisvõimet.
• Sisu Prioriseerimine: Prioriseerige nähtava leheosa (above the fold) sisu laadimist, et parandada veebisaidi tajutavat jõudlust.

Juurdepääsetavuse Kaalutlused

On ülioluline tagada, et teie masonry-küljendus oleks juurdepääsetav puuetega kasutajatele. Kaaluge järgmist:

• Semantiline HTML: Kasutage sisu loogiliseks struktureerimiseks semantilisi HTML-elemente. See aitab ekraanilugejatel sisu mõista ja lehel tõhusalt navigeerida.
• Klaviatuuriga Navigeerimine: Veenduge, et kasutajad saaksid paigutuses navigeerida klaviatuuri abil. Testige oma paigutust ainult klaviatuuriga navigeerides, et tuvastada võimalikud probleemid.
• Fookuse Haldamine: Haldage fookuse järjekorda õigesti, et tagada klaviatuurikasutajatele loogiline voog. Kasutage tabindex atribuuti, et kontrollida elementide fookuse saamise järjekorda.
• Piltide Alternatiivtekst: Pakkuge kõigile piltidele kirjeldavat alternatiivteksti, kasutades alt atribuuti. See võimaldab ekraanilugejatel edastada piltide sisu nägemispuudega kasutajatele.
• Piisav Kontrastsus: Veenduge, et teksti ja taustavärvide vahel oleks piisav kontrastsus, et vastata juurdepääsetavuse standarditele.
• ARIA Atribuudid: Vajadusel kasutage ARIA atribuute, et pakkuda abistavatele tehnoloogiatele lisateavet. Vältige siiski ARIA atribuutide liigset kasutamist ja kasutage alati võimaluse korral semantilisi HTML-elemente.

Näited Masonry-küljendustest Praktikas

Masonry-küljendusi kasutatakse laialdaselt erinevat tüüpi veebisaitidel:

• Pinterest: Masonry-küljenduse parim näide, mis esitleb pilte ja linke visuaalselt kaasahaaraval viisil.
• Dribbble: Disainiinspiratsiooni platvorm, mis kasutab disainitööde kuvamiseks masonry-küljendusi.
• Etsy: E-kaubanduse platvorm, mis kasutab tootenimekirjade esitlemiseks masonry-küljendusi.
• Uudiste Veebisaidid: Mõned uudiste veebisaidid kasutavad masonry-küljendusi artiklite ja muu sisu kuvamiseks dünaamilisel ja visuaalselt meeldival viisil. See võimaldab neil ühel lehel esitleda suuremat sisuvalikut.
• Portfoolio Veebisaidid: Paljud disainerid ja fotograafid kasutavad masonry-küljendusi oma tööde visuaalselt silmatorkavaks esitlemiseks.

Täiustatud Tehnikad

1. Dünaamiline Sisu Laadimine

Masonry-küljendusi saab kombineerida dünaamiliste sisu laadimise tehnikatega, et luua lõputu kerimise kogemusi. Kui kasutaja lehte allapoole kerib, laaditakse rohkem elemente ja lisatakse need paigutusse. See võib oluliselt parandada kasutajakogemust, pakkudes pidevat sisuvoogu.

2. Filtreerimine ja Sortimine

Masonry-küljendusi saab kombineerida ka filtreerimise ja sortimise funktsionaalsusega, et kasutajad leiaksid hõlpsasti otsitava sisu. Teegid nagu Isotope pakuvad sisseehitatud tuge masonry-küljenduste filtreerimiseks ja sortimiseks.

3. Animatsioonid ja Üleminekud

Animatsioonide ja üleminekute lisamine võib parandada kasutajakogemust ja muuta paigutuse visuaalselt köitvamaks. Kasutage sujuvate ja kaasahaaravate interaktsioonide loomiseks CSS-i üleminekuid ja animatsioone. Näiteks saate animeerida elementide läbipaistvust või suurust, kui neid paigutusse lisatakse.

Kokkuvõte

CSS Gridi eksperimentaalne masonry-küljenduse funktsioon pakub võimsat ja tõhusat viisi dünaamiliste ja visuaalselt köitvate paigutuste loomiseks. Kuigi see on alles arendusjärgus, võimaldab aluseks oleva algoritmi ja olemasolevate varulahenduste mõistmine seda tehnikat parema kasutajakogemuse saavutamiseks ära kasutada. Kombineerides CSS Gridi JavaScripti teekidega ning optimeerides jõudlust ja juurdepääsetavust, saate luua vapustavaid masonry-küljendusi, mis töötavad laias valikus brauserites ja seadmetes.