Masonry: Dilo Tse O ka Se Tlholeng o di Tlhoka Laeborari

In This Article

Mo e ka nnang dingwaga di le 15 tse di fetileng, ke ne ke bereka kwa khamphaning nngwe e re neng re dira di-app tsa baemedi ba tsa maeto, badiri ba boemelafofane le dikhamphani tsa difofane. Gape re ne ra aga letlhomeso la rona la ka fa gae la dikarolo tsa UI le bokgoni jwa tiriswa ya tsebe e le nngwe. Re ne re na le dikarolo tsa sengwe le sengwe: masimo, dikonopo, dithebo, ditlhopha, ditafole tsa tshedimosetso, dimenyu, ditlhopho tsa matlha, ditlhopho le ditlhopho tse dintsi. Re ne re bile re na le karolo ya div. Karolo ya rona ya div e ne e le ntle ka tsela, e ne e re dumella ho etsa dikhutlo tse potapotileng dibatling tsohle, tseo, dumelang kapa tjhe, e ne e se ntho e bonolo ho e etsa ka nako eo.

Tiro ya rona e diragetse ka nako nngwe mo hisitoring ya rona fa JS, Ajax, le HTML e e fetogang di ne di bonwa e le phetogo e e neng ya re tlisa mo isagweng. Ka tshoganyetso fela, re ne re ka tlhabolola tsebe ka maatla, ra bona tshedimosetso go tswa mo sefareng, le go tila go tshwanelwa ke go ya kwa ditsebeng tse dingwe, e leng se se neng se bonwa se le bonya mme se phatsima khutlonnetsepa e kgolo e tshweu mo sekirining fa gare ga ditsebe tse pedi. Go ne go na le polelo, e e neng ya ratwa ke Jeff Atwood (mothei wa StackOverflow), e e neng e balega jaana: “Tiriswa nngwe le nngwe e e ka kwalwang ka JavaScript e tla feleletsa e kwadilwe ka JavaScript.”— Jeff Atwood .

Mo go rona ka nako eo, seno se ne se utlwala e kete ke go nna le sebete sa go ya go tlhama ditiriso tseo. Go ne go utlwala e kete ke kamogelo ya kobo go dira sengwe le sengwe le JS. Ka jalo re ne ra dira sengwe le sengwe le JS, mme tota re ne re sa iphe nako ya go batlisisa ka ditsela tse dingwe tsa go dira dilo. Tota re ne re sa ikutlwe re tlhotlheletsega go ithuta sentle se HTML le CSS di ka se dirang. Tota re ne re sa lemoge webo jaaka polatefomo ya tiriswa e e fetogang ka botlalo. Re ne re e bona thata e le sengwe se re neng re tlhoka go se bereka, segolobogolo fa go tla mo go tshegetseng sebatli. Re ka latlhela fela JS e ntsi mo go yone go dira dilo. A go ipha nako ya go ithuta go le gontsi ka kafa webo e dirang ka gone le se se neng se le teng mo polatefomong go ka bo go nthusitse? Ke nnete, gongwe nkabo ke beotse setlhopha sa khoutu e e neng e sa tlhokege tota. Mme, ka nako eo, gongwe e seng thata jalo. O a bona, dipharologano tsa sebatli di ne di le botlhokwa thata ka nako eo. E ne e le nako e Internet Explorer e neng e santse e le sebatli se se laolang, ka Firefox e le ya bobedi e e gaufi, mme e simolola go latlhegelwa ke karolo ya mmaraka ka ntlha ya Chrome e e neng e tuma ka bonako. Le fa Chrome le Firefox di ne di le molemo thata mo go dumalaneng ka maemo a webo, ditikologo tse ditiriso tsa rona di neng di dira mo go tsone di ne di raya gore re ne re tshwanelwa ke go tshegetsa IE6 ka nako e telele. Le fa re ne re letleletswe go tshegetsa IE8, re ne re sa ntse re tshwanelwa ke go lebana le dipharologano tse dintsi fa gare ga dibatli. E seng seo fela, mme webo ya nako eo e ne e se na bokgoni jo bontsi jo bo agilweng mo sethaleng.

Tswelela pele ka bonako go fitlha gompieno. Dilo di fetogile fela thata. Ga se fela gore re na le bokgoni jono jo bontsi go feta le fa e le leng pele, mme le selekanyo se di nnang teng ka sone se oketsegile. E re ke botse potso gape, he: A go ipha nako ya go ithuta go le gontsi ka kafa webo e dirang ka gone le se se leng teng mo polatefomong go ka go thusa gompieno? Ee ruri. Go ithuta go tlhaloganya le go dirisa polatefomo ya webo gompieno go go baya mo maemong a magolo go feta batlhabolodi ba bangwe. Ebang o sebetsa ka tshebetso, phihlello, ho arabela, kaofela ha tsona mmoho, kapa ho romela feela dikarolo tsa UI, haeba o batla ho e etsa jwalo ka moenjiniere ya nang le boikarabelo, ho tseba disebediswa tse fumanehang ho wena ho o thusa ho fihlela maikemisetso a hao ka potlako le hantle. Dilo Dingwe Tse O Ka Nnang wa Se Tlhole Di Tlhoka Laeborari Ka jalo, ka go itse gore dibatli di tshegetsa eng gompieno, potso ke gore: Re ka tlogela eng? A re tlhoka karolo ya div go dira dikhutlo tse di kgolokwe ka 2025? Gone ke boammaaruri gore ga re dire jalo. Thepa ya radius ya molelwane e ntse e tshegediwa ke dibatli tsotlhe tse di dirisiwang ga jaana dingwaga di feta 15 mo nakong eno. Mme sebopeho sa sekhutlo le sona se tla haufinyane, bakeng sa dikhutlo tse fancier le ho feta. A re lebeng ditiriso tsa bosheng tse jaanong di leng teng mo dibatlising tsotlhe tse dikgolo, le tse o ka di dirisang go emisetsa ditshegetso tse di leng teng mo polokelotshedimosetsong ya gago ya dikhoutu. Ntlha ga se gore o tlogele dilaeborari tsotlhe tse o di ratang ka bonako mme o kwale gape codebase ya gago. Fa e le ka sengwe le sengwe se sengwe, o tla tlhoka go akanyetsa tshegetso ya sebatli pele mme o dire tshwetso go ikaegilwe ka mabaka a mangwe a a rileng a porojeke ya gago. Dikarolo tse di latelang di tsenngwa tirisong mo dienjeneng tse tharo tse dikgolo tsa sebatli (Chromium, WebKit, le Gecko), mme o ka nna wa bo o na le ditlhokego tse di farologaneng tsa tshegetso ya sebatli tse di go thibelang go di dirisa gone fela foo. Le fa go ntse jalo, jaanong e sa ntse e le nako e e siameng ya go ithuta ka dikarolo tseno, mme gongwe o rulaganye go di dirisa ka nako nngwe. Dipuisano le Dipuisano API ya Popover, elemente ya HTML ya , le elemente ya maaka ya ::backdrop di ka go thusa go tlosa dilo tse di ikaegileng ka popup,ntlha ya sedirisiwa, le dilaeborari tsa puisano, tse di jaaka UI e e Phaphametseng, Tippy.js, Tether, kgotsa Tlhagiso ya Sediriswa ya React. Di tshwara phitlhelelo le taolo ya tsepamiso ya gago, go tswa mo lebokosong, di ka fetolwa thata ka go dirisa CSS, mme di ka tshedisiwa bonolo. Diakodeone Elemente ya , tshwano ya leina la yone la dielemente tse di sa tshwaneng, le elemente ya maaka ya ::dintlha-diteng di tlosa tlhokego ya dikarolo tsa akodeone tse di jaaka Bootstrap Accordion kgotsa karolo ya React Accordion. Go dirisa fela polatefomo fano go raya gore go bonolo gore batho ba ba itseng HTML/CSS ba tlhaloganye khoutu ya gago kwantle ga go ithuta pele go dirisa laeborari e e rileng. Gape go raya gore ga o ka ke wa roba diphetogo mo laeboraring kgotsa go emisa laeborari eo. Mme, e le ruri, go raya khoutu e nnye go e laisolola le go e dirisa. Dikarolo tsa dintlha tse di sa tshwaneng ga di tlhoke JS go bula, go tswala, kgotsa go tshedisa. Popegopuo ya CSS Dikarolo tsa Cascade, tsa motheo wa khoutu wa CSS o o rulagantsweng sentle, go dira sentlhaga sa CSS, go bona CSS e e kopaneng thata, ditiro tse disha tsa mebala, mebala e e amanang, le motswako wa mebala, ditiro tse disha tsa Dipalo tse di jaaka abs (), sign (), pow () le tse dingwe di thusa go fokotsa go ikaega ka diporosesara tsa pele ga CSS, dilaeborari tsa tiriso tse di jaaka TailwindJ ebratime kgotsa Boot. Mofetodi wa motshameko :has (), nngwe ya dikarolo tse di kopilweng thata ka nako e telele, e tlosa tlhokego ya ditharabololo tse di raraaneng tse di theilweng mo JS. Ditiriso tsa JS Mekgwa ya segompieno ya Array e e tshwanang le findLast (), kgotsa at (), mmogo le mekgwa ya Set e e tshwanang le pharologano (), marakanelo (), kopano () le e mengwe e ka fokotsa go ikaega ka dilaeborari tse di tshwanang le Lodash. Dipotso tsa setshodi Dipotso tsa setshodi di dira gore dikarolo tsa UI di tsibogele dilo tse dingwe kwa ntle ga bogolo jwa lefelo la pono, mme ka jalo di dira gore di kgone go dirisiwa gape mo mabakeng a a farologaneng. Ga go tlhokege go dirisa laeborari ya UI e e bokete ya JS gape mo go seno, e bile ga go tlhokege go dirisa polyfill le yone. Thulaganyo Grid, subgrid, flexbox, kgotsa multi-column di ntse di le teng ka nako e telele jaanong, mme fa o leba dipholo tsa dipatlisiso tsa State of CSS, go bonala sentle gore batlhami ba na le go nna kelotlhoko thata ka go amogela dilo tse disha, mme ba leta nako e telele thata pele ba dira jalo. Dikarolo tseno e nnile Motheo ka nako e telele mme o ka di dirisa go tlosa go ikaega ka dilo tse di jaaka tsamaiso ya keriti ya Bootstrap, ditiriso tsa flexbox tsa Letlhomeso la Motheo, keriti e e tlhomameng ya Bulma, keriti ya Materialize, kgotsa dikholomo tsa Tailwind. Ga ke re o tshwanetse go tlogela letlhomeso la gago. Setlhopha sa gago se e amogetse ka lebaka, mme go e tlosa e ka nna porojeke e kgolo. Empa ho sheba seo sethala sa webo se ka se fang ntle le sephuthelo sa motho wa boraro hodimo ho tla le melemo e mengata. Dilo Tse o ka nnang wa se tlhole o di tlhoka mo isagweng e e gaufi Jaanong, a re lebeng ka bonako dilo dingwe tse o se kitlang o di tlhoka laeborari mo isagweng e e sa fediseng pelo. Ke gore, dilo tse di fa tlase ga di ise di siamele go amogelwa ka bontsi, fela go di ela tlhoko le go rulaganyetsa tiriso e e ka nnang teng moragonyana go ka thusa. Go baya tshetledi CSS anchor positioning e tshwaragane le go bewa ga di-popover le dintlha tsa didirisiwa fa di bapisiwa le dielemente tse dingwe, mme e tlhokomela go di boloka di le mo ponong, tota le fa o tsamaisa, o tsamayatsamaya, kgotsa o fetola bogolo jwa tsebe. Se ke tlaleletso e kgolo ya Popover API e e umakilweng pele, e e tla dirang gore go nne bonolo le go feta go fuduga go tswa mo ditharabololo tsa JS tse di tlhokang tiro e ntsi. API ya go Tsamaya API ya Navigation e ka dirisiwa go tshwaragana le go tsamaya mo ditirisong tsa tsebe e le nngwe mme e ka nna tlaleletso e kgolo, kgotsa le eleng go emisetsa, ditiro tsa React Router, go tsenya tsela ya Next.js, kgotsa go tsenya tsela ya Angular. Leba API ya Diphetogo API ya Diphetogo tsa Tebo e ka tshela fa gare ga maemo a a farologaneng a tsebe. Mo tirisong ya tsebe e le nngwe, seno se dira gore diphetogo tse di borethe fa gare ga dinaga di nne bonolo thata, mme se ka go thusa go tlosa dilaeborari tsa ditshwantsho tse di tshelang tse di jaaka Anime.js, GSAP, kgotsa Motion.dev. Se se botoka le go feta, API e ka dirisiwa gape le ditiriso tsa ditsebe tse dintsi. A o gakologelwa pelenyana, fa ke ne ke re lebaka la go bo re agile ditiriso tsa tsebe e le nngwe kwa khamphaning e ke neng ke bereka kwa go yone dingwaga di le 15 tse di fetileng e ne e le go tila go phatsima go go tshweu ga go laisa ditsebe gape fa o tsamaya? Fa API eo e ka bo e le teng ka nako eo, re ka bo re kgonne go fitlhelela ditlamorago tse dintle tsa phetogo ya tsebe kwantle ga letlhomeso la tsebe e le nngwe le kwantle ga go laisolola go gogolo ga ntlha ga tiriswa yotlhe. Ditshwantsho tse di tsamaisiwang ke Sekolo Ditshwantsho tse di tsamaisiwang ke momeno di tsamaya mo boemong jwa momeno wa modirisi, go na le fa nako e ntse e tsamaya, mme seno se dira gore e nne tharabololo e e siameng ya go anela dikgang le maeto a dikumo. Batho ba bangwe ba ile ba feta go sekae ka yone, mme fa e dirisiwa sentle, seno e ka nna sedirisiwa se se nang le matswela thata sa go tlhama, mme se ka thusa go tlosa dilaeborari tse di jaaka: ScrollReveal, GSAP Scroll, kgotsa .WOW.js Ditlhopho tse di ka fetolwang Tlhopho e e ka fetolwang ke elemente e e tlwaelegileng ya e e go letlang go fetola ponagalo le diteng tsa yone ka botlalo, fa o ntse o netefatsa phitlhelelo le melemo ya tiragatso. Seno ga se bolo go tla, e bile ke karolo e e kopiwang thata, mme go a gakgamatsa go e bona e tla mo sethaleng sa webo mo bogautshwaneng. Ka tlhopho e e ageletsweng e e ka fetolwang, o ka feleletsa o tlogetse khoutu eno yotlhe e e thata go tlhokomelwa ya JS ya dikarolo tsa gago tse di tlhophilweng tse di tlwaelegileng. CSS Go aga ka matlapa CSS Masonry ke karolo e nngwe e e tlang ya polatefomo ya webo e ke batlang go dirisa nako e ntsi mo go yone. Ka CSS Masonry, o ka fitlhelela dithulaganyo tse di thata thata, kgotsa le eleng tse di sa kgonegeng, ka flex, grid, kgotsa dilo tse dingwe tse di ageletsweng tsa thulaganyo ya CSS. Batlhami gantsi ba dirisa dilaeborari tsa batho ba bangwe go fitlhelela dithulaganyo tsa Masonry, tse di jaaka laeborari ya Masonry JS. Mme, go le gontsi ka seo moragonyana. A re phutheleng ntlha eno pele ga re fetela kwa Masonry. Lebaka la go bo o tshwanetse go kgathala Mmaraka wa ditiro o tletse ka batlhami ba webo ba ba nang le maitemogelo mo JavaScript le matlhomeso a bošeng a letsatsi. Ka jalo, tota, go thusa eng go ithuta go dirisa dilo tsa bogologolo tsa polatefomo ya webo thata, fa o ka kgona go dira dilo tse di tshwanang le dilaeborari, ditiriso, le matlhomeso a o setseng o a itse gompieno? Fa intaseteri yotlhe e ikaegile ka matlhomeso ano, mme o ka goga fela laeborari e e siameng, a barekisi ba dibatli ga ba a tshwanela go dira fela le dilaeborari tseno go dira gore di laise le go tsamaya ka bonako, go na le go leka go tlhatswa batlhami pelo gore ba dirise polatefomo boemong jwa seo? Sa ntlha, re dira le bakwadi ba laeborari, mme re dira gore matlhomeso a nne botoka ka go ithuta ka se ba se dirisang le go tokafatsa mafelo ao. Mme sa bobedi, “go dirisa polatefomo fela” go ka tlisa melemo e e botlhokwa thata. Go Romela Khoutu e nnye mo Didirisweng Mosola o mogolo ke gore o feleletsa o romela khoutu e nnye thata mo didirisweng tsa bareki ba gago. Ho ya ka 2024 Web Almanac, palohare ya dikopo tsa HTTP e ka bang 70 ka sebaka, boholo ba tsona bo bakilwe ke JavaScript e nang le dikopo tse 23. Ka 2024, JS e ne ya feta ditshwantsho jaaka mofuta wa faele o o laolang le one. Palogare ya dikopo tsa ditsebe tsa difaele tsa JS ke 23, e leng tlhatlogo ya 8% fa e sa le ka 2022. Mme bogolo jwa tsebe bo tswelela go gola ngwaga le ngwaga. Bokete jwa tsebe jo bo fa gare bo ka nna 2MB jaanong, e leng 1.8MB go feta dingwaga di le 10 tse di fetileng.

Ke nnete, lebelo la kgolagano ya gago ya inthanete le lone le ka tswa le oketsegile, mme ga go a nna jalo mo go mongwe le mongwe. Mme ga se mongwe le mongwe yo o nang le bokgoni jo bo tshwanang jwa sedirisiwa. Go goga khoutu ya motho wa boraro ya dilo tse o ka di dirang ka polatefomo, go na le moo, gongwe go raya gore o romela khoutu e ntsi, mme ka jalo o fitlhelele bareki ba le mmalwa go feta ka fa o ka tlwaelang go dira ka teng. Mo webong, tiragatso e e sa siamang ya go laisa e isa kwa dikelo tse dikgolo tsa go tlogela mme e gobatsa leina la letshwaokgwebo. Go Dirisa Khoutu e nnye mo Didirisweng Mo godimo ga moo, khoutu e o e romelang mo didirisweng tsa bareki ba gago e ka nna ya dira ka bonako fa e dirisa dikakanyo di le mmalwa tsa JavaScript mo godimo ga polatefomo. Gape gongwe e tsiboga thata e bile e fitlhelega thata ka thulaganyetsoruri. Dilo tseno tsotlhe di dira gore go nne le bareki ba bantsi le ba ba itumetseng. Hlahloba blog ya selemo le selemo ya phapang ya ho se lekane ha tshebetso ya mosebetsi mmoho le nna Alex Russell, e bontshang hore disebediswa tsa maemo a hodimo ha di yo haholo mebarakeng e nang le basedisi ba dibilione ka lebaka la ho se lekane ha leruo. Mme phatlha eno e ntse e gola fela fa nako e ntse e tsamaya.

Thulaganyo ya Masonry e e Ageletsweng Sediriswa sengwe sa polatefomo ya webo se se tlang mo bogautshwaneng mme se ke se itumelelang thata ke CSS Masonry.

E re ke simolole ka go tlhalosa gore Masonry ke eng. Go aga ka matlapa ke eng Masonry ke mofuta wa thulaganyo e e neng ya dira gore e ratwe ke Pinterest dingwaga tse di fetileng. E bopa dipina tse ikemetseng tsa dikahare tseo dintho di iphuthelang haufi le qalo ya pina ka moo di ka kgonang.

Batho ba le bantsi ba bona Masonry e le kgetho e kgolo ya diphotefolio le difoto, tse ruri e ka di dirang. Mme Masonry e fetofetoga le maemo go feta se o se bonang mo Pinterest, mme ga e a lekanyediwa fela go dithulaganyo tse di tshwanang le diphororo. Mo thulaganyong ya Masonry:

Dipina e ka nna dikholomo kgotsa mela:

Dipina tsa diteng ga di tlhoke go nna bogolo jo bo tshwanang:

Dilwana di ka akaretsa dipina di le mmalwa:

Dilwana di ka bewa mo dipina tse di rileng; ga ba tlhoke go latela dikgatotharabololo tsa go baya ka go itirisa ka metlha:

Dipontsho Fano go na le dipontsho di le mmalwa tse di bonolo tse ke di dirileng ka go dirisa go tsenngwa tirisong go go tlang ga CSS Masonry mo Chromium. Pontsho ya lefelo la ditshwantsho, e e bontshang kafa dilwana (setlhogo mo kgannyeng eno) di ka akaretsang dipina di le dintsi ka gone:

Lefelo le lengwe la ditshwantsho le le bontshang dipina tsa bogolo jo bo farologaneng:

Thulaganyo ya saete ya dikgang e e nang le dipina dingwe tse di bulegileng go feta tse dingwe, le dintlha dingwe tse di akaretsang bophara jotlhe jwa thulaganyo:

Boto ya kanban e e bontshang gore dilwana di ka bewa mo dipina tse di rileng:

Ela tlhoko: Thedipontsho tse di fetileng di ne di dirilwe ka mofuta wa Chromium o o iseng o nne teng mo badirising ba le bantsi ba webo, ka gonne CSS Masonry e sa tswa go simolola go dirisiwa mo dibatling. Le fa go ntse jalo, batlhami ba webo ba ntse ba dirisa dilaeborari ka boitumelo go tlhama dithulaganyo tsa Masonry ka dingwaga di le dintsi. Mafelo a a Dirisang Masonry Gompieno Eleruri, Masonry e tlwaelegile thata mo webong gompieno. Dikai di le mmalwa tse ke di boneng kwa ntle ga Pinterest ke tseno:

Le dikai tse dingwe di le mmalwa, tse di sa bonaleng sentle:

Ka jalo, dithulaganyo tseno di ne tsa tlhamiwa jang? Ditharabololo Leano le lengwe le ke le boneng le dirisiwa ke go dirisa thulaganyo ya Flexbox boemong jwa seo, go fetola ntlha ya yone go nna kholomo, le go e seta go phuthela. Ka tsela eno, o ka baya dilwana tsa bogodimo jo bo farologaneng mo dikholomong tse dintsi, tse di ikemetseng, go naya kgopolo ya thulaganyo ya Masonry:

Le fa go ntse jalo, go na le dithibelo tse pedi ka tharabololo eno:

Tatelano ya dilwana e farologana le se e neng e tla nna sone ka thulaganyo ya mmatota ya Masonry. Ka Flexbox, dilwana di tlatsa kholomo ya ntlha pele mme, fa e tletse, di ye kwa kholomong e e latelang. Ka Masonry, dintho di ne di tla kgobokana ka pina efe kapa efe (kapa kholomo tabeng ena) e nang le sebaka se ngata se fumanehang. Mme gape, mme gongwe sa botlhokwa le go feta, tharabololo eno e tlhoka gore o beye bogodimo jo bo tlhomameng mo setshoding sa Flexbox; go seng jalo, go ne go ka se nne le go phuthela.

Dilaeborari tsa Masonry tsa motho yo mongwe Bakeng sa dinyewe tse tsoetseng pele, bahlahisi ba ntse ba sebedisa dilaeborari. Laeborari e e itsegeng thata le e e ratiwang thata ya seno e bidiwa fela Masonry, mme e laisololwa makgetlo a ka nna 200 000 ka beke go ya ka NPM. Squarespace gape e fana ka karolo ya thulaganyo e e ranolang thulaganyo ya Masonry, ya mofuta o mongwe o o senang khoutu, mme mafelo a mantsi a a e dirisa. Dikgetho tsena ka bobedi di sebedisa khoutu ya JavaScript ho beha dintho sebopehong. Go aga ka matlapa go go ageletsweng Ke itumelela tota gore Masonry jaanong e simolola go tlhagelela mo dibatling jaaka karolo ya CSS e e tsenngwang mo teng. Fa nako e ntse e ile, o tla kgona go dirisa Masonry fela jaaka o dirisa Grid kgotsa Flexbox, ke gore, o sa tlhoke ditharabololo dipe kgotsa khoutu ya motho yo mongwe. Setlhopha sa me kwa Microsoft se ntse se dirisa tshegetso ya Masonry e e ageletsweng mo porojekeng ya motswedi o o bulegileng wa Chromium, e Edge, Chrome, le dibatli tse dingwe tse dintsi di theilweng mo go yone. Mozilla e ne e le morekisi wa ntlha wa sebatli go tshitshinya go tsenngwa tirisong ga Masonry morago ka 2020. Mme Apple gape e ntse e kgatlhegela thata go dira gore thulaganyo eno e ntšha ya webo e nne ya bogologolo. Tiro ya go lekanyetsa ntlha le yone e tswelela pele, ka tumalano mo teng ga setlhopha sa tiro sa CSS ka ga tataiso ka kakaretso le e leng pontsho e ntšhwa ya mofuta wa pontsho: grid-lanes. Fa o batla go ithuta go le gontsi ka Masonry le go latedisa kgatelopele, leba tsebe ya me ya didirisiwa tsa CSS Masonry. Fa nako e ntse e ile, fa Masonry e nna karolo ya Motheo, fela jaaka Grid kgotsa Flexbox, re tla kgona go e dirisa fela le go solegelwa molemo ke:

Tiragatso e e botoka, Tsibogo e e botoka, Bonolo ba tshebediso le khoutu e bonolo.

A re sekasekeng dilo tseno ka kelotlhoko. Tiragatso e e botoka Go itirela thulaganyo ya gago ya thulaganyo e e tshwanang le ya Masonry, kgotsa go dirisa laeborari ya motho yo mongwe boemong jwa seo, go raya gore o tla tshwanelwa ke go dirisa khoutu ya JavaScript go baya dilwana mo sekirining. Seno gape se raya gore khoutu eno e tla bo e thibela go ranola. Eleruri, ga go kitla go tlhagelela sepe, kgotsa dilo ga di kitla di nna mo mafelong a a siameng kgotsa tsa bogolo jo bo siameng, go fitlha khoutu eo ya JavaScript e dira. Thulaganyo ya Masonry gantsi e dirisiwa mo karolong e kgolo ya tsebe ya webo, se se rayang gore khoutu e tla bo e dira gore diteng tsa gago tse dikgolo di tlhagelele moragonyana go feta ka fao di neng di ka nna ka teng, e nyenyefatsa LCP ya gago, kgotsa Largest Contentful Paint metric, e e nang le seabe se segolo mo tirong e e lemogiwang le mo go tokafatseng enjene ya patlo. Ke lekile laeborari ya Masonry JS ka thulaganyo e e bonolo le ka go etsisa kgolagano e e bonya ya 4G mo DevTools. Laeborari ga e kgolo thata (24KB, 7.8KB gzipped), mme go tsere 600ms go laisa mo maemong a me a teko. Fano go na le rekoto ya tiragatso e e bontshang nako e telele ya go laisa ya 600ms ya laeborari ya Masonry, le gore ga go na tiro epe e nngwe ya go ranola e e diragetseng fa seo se ntse se diragala:

Mo godimo ga moo, morago ga nako ya ntlha ya go laisa, sekwalwa se se laisolotsweng se ne se tlhoka go sekasekwa, go kokoanngwa le go dirisiwa. Tse tsotlhe, jaaka go umakilwe pelenyana, di ne di thibela go ranolwa ga tsebe. Ka tiriso e e ageletsweng ya Masonry mo sebatling, ga re kitla re nna le sekeripiti se re ka se laisang le go se dirisa. Enjene ya sebatli e tla dira fela tiro ya yone ka nako ya kgato ya ntlha ya go ranola tsebe. Tsibogo e e Botoka Go tshwana le fa tsebe e laisa la ntlha, go fetola bogolo jwa fensetere ya sebatli go dira gore thulaganyo e e mo tsebeng eo e ranolwe gape. Le fa go ntse jalo, mo nakong eno, fa tsebe e dirisa laeborari ya Masonry JS, ga go tlhokege gore o laise sekeripiti gape, ka gonne se setse sefano. Le fa go ntse jalo, khoutu e e tsamaisang dilwana mo mafelong a a siameng e tlhoka go dira. Jaanong laeborari eno e lebega e le bonako thata go dira seno fa tsebe e laisa. Le fa go ntse jalo, e dira gore dilwana di tshele fa di tlhoka go fudugela kwa lefelong le lengwe fa go fetolwa bogolo jwa fensetere, mme seno se dira pharologanyo e kgolo. Gone ke boammaaruri gore badirisi ga ba dirise nako go fetola bogolo jwa difensetere tsa sebatli sa bone jaaka rona batlhami re dira. Mme maitemogelo ano a go fetola bogolo jwa ditshedi a ka nna a a tshosang thata mme a oketsa nako e e tsewang gore tsebe e tlwaelane le bogolo jwa yone jo bosha. Tiriso e e Bonolo le Khoutu e e Bonolo Kafa go leng bonolo ka gone go dirisa karolo ya webo le kafa khoutu e lebegang e le bonolo ka gone ke dilo tsa botlhokwa tse di ka dirang pharologanyo e kgolo mo setlhopheng sa gago. Ga di ka ke tsa nna botlhokwa jaaka maitemogelo a bofelo a modirisi, e le ruri, mme maitemogelo a motlhabolodi a ama go tlhokomelwa. Go dirisa karolo ya webo e e tsenngwang mo teng go tla le melemo e e botlhokwa mo ntlheng eo:

Batlhami ba ba setseng ba itse HTML, CSS, le JS go ka direga thata gore ba kgone go dirisa karolo eo bonolo ka gonne e diretswe go kopana sentle le go tsamaisana le polatefomo yotlhe ya webo. Ga go na kotsi ya gore go nne le diphetogo tse di tla tlhagisiwang mo tseleng e karolo eno e dirisiwang ka yone. Go batla go se na kotsi ya gore karolo eo e se ka ya tlhola e dirisiwa kgotsa ya se ka ya tlhokomelwa.

Mo ntlheng ya Masonry e e ageletsweng, ka gonne ke thulaganyo ya bogologolo, o e dirisa go tswa mo CSS, fela jaaka Grid kgotsa Flexbox, ga go na JS e e amegang. Gape, dipopego tse dingwe tsa CSS tse di amanang le thulaganyo, tse di jaaka gap, di dira jaaka o ka lebelela gore di dire. Ga go na malepa kgotsa ditharabololo tse o ka di itseng, mme dilo tse o di ithutang di kwadilwe mo MDN. Bakeng sa Masonry JS lib, ho qala ho batla ho rarahane: ho hloka tšobotsi ya data e nang le popehopuo e itseng, hammoho le dikarolo tse patilweng tsa HTML ho beha boholo ba kholomo le sekgeo. Mo godimo ga moo, fa o batla go tsenya dikholomo, o tshwanetse go akaretsa bogolo jwa phatlha ka bowena go tila mathata:

4.2.2/kgaolo/thulaganyo ya matlapa .selekanyi sa pina, .ntlha { bophara: 20%; } .selekanyi sa mosele { bophara: 1rem; } .ntlha { boleele: 100px; molelwane-boloko-bokhutlo: 1rem; } .ntlha:ngwana-wa-nth(o o sa tlwaelegang) { boleele: 200px; } .ntlha--bophara2 { bophara: khalc (40% + 1rem); }

A re bapiseng seno le gore go tsenngwa tirisong ga Masonry go go ageletsweng go tla lebega jang: .setshodi { pontsho: mela ya keriti; mela ya keriti: boeletsa(4, 20%); phatlha: 1rem; } .ntlha { boleele: 100px; } .ntlha:ngwana-wa-nth(o o sa tlwaelegang) { boleele: 200px; } .ntlha--bophara2 { kholomo ya keriti: sepan 2; }