Fakakaukau 2.x – Gridzy.Gallery

Kuo liliu ʻotomētiki ʻa e uepisaití. Kapau 'oku 'ikai ke mahino ha me'a, kataki 'o vakai ki he ngaahi tohi faka-Pilitania.

Ngaue'aki Tefito

Upload 'a e ngaahi faile Gridzy ki ho'o server pea tanaki atu kinautolu ki ho'o uepisaiti ('oku angamaheni 'aki 'i he konga 'ulu):

<link rel="stylesheet" href="gridzy/gridzy.min.css" />
<script src="gridzy/gridzy.min.js"></script>

Tānaki atu ʻa e HTML code (ʻi ha feituʻu pē ʻi he konga ʻo e sinó):

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Ko ia ia! Ko e sipinga ngaue kakato ia. 'Oku 'ikai fie ma'u ha toe initialization.

Fakalelei'i

Ko e founga faingofua taha ke configure 'a e Gridzy ko e, ke faka'aonga'i pe 'a e ngaahi 'ulungaanga HTML. 'Oku fie ma'u pe ke ke prefix 'a e ngaahi hingoa 'o e fili 'aki ' data-gridzy- . Ko ia, ke seti 'a e fili 'o e spaceBetween , tanaki atu pe 'a e 'ulungaanga 'o e fakamatala data-gridzy-spaceBetween .

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Ngaahi Fili Tefito

	Mahu'inga tu'uma'u	Fakamatala
`animate`	`true`	Fakapapau'i pe 'oku totonu ke faka'aonga'i 'a e ngaahi faka'ata 'i he taimi 'oku liliu ai 'a e grid (hange ko 'eni, 'i he taimi 'oku liliu ai 'a e lahi 'o e matapa sio'ata 'o e browser pe 'i he taimi 'oku fokotu'u ai ha filter).
`layout`	`justified`	Fakaʻuhingaʻi ʻa e fokotuʻutuʻu ʻoku fakaʻaongaʻí. 'Oku poupou'i 'e he Gridzy.js 2 'a e ongo fokotu'utu'u kehekehe `waterfall` e `justified` . 'Oku takitaha 'i ai 'ene ngaahi fakangatangata 'o e fili 'oku tanaki atu, 'a ia 'e lava ke ke ma'u 'i lalo 'i he tepile ko 'eni.
`filter`	`*`	Fakapapauʻi pe ko e fē ʻa e ngaahi ʻata ʻoku totonu ke fakaʻaliʻalí. 'E lava ke faka'aonga'i ha fa'ahinga CSS-fili ko e mahu'inga heni. 'Oku angamaheni 'aki hono seti 'otometiki 'o fakafou 'i `filterControls` (vakai ki he fili hoko). Vakai ki he ngaahi Filter .
`filterControls`		Fakapapau'i 'a e ngaahi 'elemeniti 'o e fotunga 'e lava ke faka'aonga'i ke filter 'a e ngaahi 'ata. Ko ha fa'ahinga fili CSS, 'oku ne fili 'a e ngaahi 'elemeniti 'o e foomu HTML, 'e lava ke faka'aonga'i ia ko e mahu'inga heni. Vakai ki he ngaahi Filter .
`autoConsiderScrollBars`	`true`	Ke tomu'a tala 'a e laulahi 'oku ma'u kapau 'e 'asi pe mole 'a e ngaahi pa takai. 'Oku fokotu'u ma'u pe ke tuku ia 'i he `true` tukukehe kapau 'oku fakatupu 'e he automatism ko 'eni ha ngaahi palopalema.

Justified Fili ki he Fokotu'utu'u

	Mahu'inga tu'uma'u	Fakamatala
`autoFontSize`	`false`	'Oku fakafo'ou 'otometiki 'a e koloa 'o e font-size 'o e puha takitaha 'o makatu'unga 'i he lahi 'o e puha 'uluaki. 'I he default 'oku 'ikai ke seti mahino 'a e koloa 'o e font-size.
`desiredHeight`	`190`	Faka'uhinga'i 'a e ma'olunga 'oku fie ma'u 'o e ngaahi laine 'o e 'elemeniti. Ko e ma'olunga mo'oni 'e fika'i ia 'o fakatatau ki he laulahi 'oku ma'u mo e ngaahi 'elemeniti 'i he laine.
`hideOnMissingImage`	`true`	Fufū ʻa e ngaahi puha ʻoku ʻi ai ha ngaahi ʻata naʻe ʻikai lava ke ʻuta.
`spaceBetween`	`4`	Faka'uhinga'i 'a e mama'o 'i he vaha'a 'o e ngaahi 'elemeniti 'i he pixels.
`lastRowAlign` talu mei he liliu 2.3.0.	`justified`	Fakamahino'i 'a e 'ulungaanga 'o e laine faka'osi. Ko e ngaahi mahu'inga 'oku fakangofua ko `left` , `center` , `right` mo `justified` .
`singleRowAlign` talu mei he liliu 2.3.0.	`justified`	Faka'uhinga'i 'a e 'ulungaanga kapau 'oku 'i ai ha laine 'e taha pe. Ko e ngaahi mahu'inga 'oku fakangofua ko `left` , `center` , `right` mo `justified` .
~~`fillLastRow`~~ ~~talu mei he liliu 2.1.0.~~	~~`true`~~	TO'O talu mei he version 2.4.0. ('OKU 'OSI 'A E TALU talu mei he liliu 2.3.0 ) Fokotuʻutuʻu ʻa e ngaahi ʻīmisí koeʻuhí ke fonu kakato maʻu pē ʻa e laine fakaʻosí. Kapau 'oku ke palani ke append 'a e ngaahi 'ata dynamically, 'e lava ke hoko ia ko ha fakakaukau lelei ke deactivate 'eni. 'Oku 'ikai ha ola 'i he ngaahi laine 'e taha (vakai ki `fillSingleRow` ).
`fillSingleRow` talu mei he liliu 2.1.0.	~~`true`~~	TO'O talu mei he version 2.4.0. ('OKU 'OSI 'A E TALU talu mei he liliu 2.3.0 ) Kapau ʻoku ʻi ai ha laine pē ʻe taha, ʻokú ne fokotuʻutuʻu ʻa e ngaahi ʻīmisí koeʻuhí ke fonu kakato maʻu pē ʻa e laine ko iá. Kapau 'e lava ke hoko 'oku ke ma'u pe ha 'ata 'e taha pe ua 'i he fale faka'ali'ali, 'e lava ke hoko ko ha fakakaukau lelei ke deactivate 'eni.

Waterfall Ngaahi Fili Fakahokohoko

	Mahu'inga tu'uma'u	Fakamatala
`autoFontSize`	`false`	'Oku fakafo'ou 'otometiki 'a e koloa 'o e font-size 'o e puha takitaha 'o makatu'unga 'i he lahi 'o e puha 'uluaki. 'I he default 'oku 'ikai ke seti mahino 'a e koloa 'o e font-size.
`desiredWidth`	`250`	Faka'uhinga'i 'a e laulahi 'oku fie ma'u 'o e ngaahi kolomu. Ko e laulahi mo'oni 'e fika'i ia 'o fakatatau ki he laulahi 'oku ma'u mo e lahi 'o e ngaahi kolomu.
`hideOnMissingImage`	`true`	Fufū ʻa e ngaahi puha ʻoku ʻi ai ha ngaahi ʻata naʻe ʻikai lava ke ʻuta.
`horizontalOrder`	`false`	Faka'uhinga'i 'oku fokotu'u pau 'a e ngaahi 'elemeniti 'a e 'elemeniti 'e taha 'i he kolomu takitaha mei he to'ohema ki he to'omata'u, pea toe kamata 'i he kolomu to'ohema taha tau'ataina 'i he kolomu 'oku lahi ange 'a e feitu'u. 'I he default 'e fokotu'u ma'u pe 'a e ngaahi 'elemeniti 'i he kolomu 'oku si'isi'i taha 'a e ma'olunga.
`spaceBetween`	`4`	Faka'uhinga'i 'a e mama'o 'i he vaha'a 'o e ngaahi 'elemeniti 'i he pixels.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

Ngaahi Fili Fakalakalaka Lahi Ange

Ki ha ngaahi fili fakalakalaka ange, vakai ki he API .

HTML faka'uhinga

Ko e fokotu'utu'u HTML faingofua taha 'o e Gridzy ko 'eni:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Ka neongo ia, 'Oku fu'u fe'unga 'a e Gridzy pea 'e lava ke ke faka'aonga'i 'a e meimei ha fa'ahinga fokotu'utu'u HTML kehe. ‘Oku ‘i ai pē ha ngaahi poini si‘isi‘i ke fakakaukau ki ai:

ʻOku fakafofongaʻi ʻe he tamasiʻi takitaha ʻo e ʻelemēniti ʻo e koniteiná ha meʻa ʻe taha ʻi he grid.
Fakatou'osi 'a e 'elemeniti 'o e koniteina mo 'ene fanau 'e lava ke hoko ko ha fa'ahinga tag, hange ko e ul mo li (fakakaukau pe ke toe fakafoki 'a e ngaahi defaults 'o e browser).
Kapau 'oku 'ikai ko ha tamasi'i fakahangatonu ha 'elemeniti img 'iate ia pe, 'oku ne fie ma'u 'a e kalasi gridzyImage .

Ko ia ko ha fokotu'utu'u HTML ngaue foki 'eni:

<ul class="gridzy">
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    </span>
  </li>
</ul>

Tautefito kapau 'oku ke fie tanaki atu ha ngaahi fakamatala, 'Oku ke fie ma'u ha fokotu'utu'u HTML fakalakalaka. Ke ako lahi ange fekau'aki mo ia, vakai ki he Ngaahi Fakakaukau & Kili .

Ngaahi Fakamatala & Ngaahi Kili

Kapau 'oku ke fie tanaki atu ha ngaahi fakamatala ki ho'o fale faka'ali'ali, 'Oku fie ma'u ke ke faka'uhinga'i 'a e fōtunga. Ko ia ai, 'oku 'i ai ha ngaahi kili kuo tomu'a fakapapau'i 'oku ma'u. Ko e kili takitaha 'oku kau ai ha faile CSS. 'Oku fie ma'u ke ke tanaki atu 'a e faile ko 'eni 'o tanaki atu ki he ngaahi faile Gridzy tefito ('oku angamaheni 'aki 'i he konga 'ulu):

<link rel="stylesheet" href="gridzy/skins/gridzySkinClassic/style.min.css" />

'Ikai ngata ai 'oku ke fie ma'u ha fokotu'utu'u HTML fakalakalaka:

<div class="gridzy gridzySkinClassic">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    <figcaption class="gridzyCaption">yet another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    <figcaption class="gridzyCaption">a caption text again</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    <figcaption class="gridzyCaption">one last caption text</figcaption>
  </figure>
</div>

Kapau 'oku ke fifili fekau'aki mo e fokotu'utu'u 'o e HTML, vakai ki he Semantic HTML .

Ki he fakamatala 'e lava ke ke faka'aonga'i ha fa'ahinga 'o e tag, fakapapau'i pe 'oku 'i ai 'a e kalasi gridzyCaption . 'Oku fie ma'u 'e he 'elemeniti img a e kalasi gridzyImage .

gridzySkinClassic Oku fakahaa'i atu 'e he sipinga 'i 'olunga 'a e kili . Ke fakaʻaongaʻi ha taha kehe, fetongi pē ʻa e hingoa ʻo e kilí ʻaki ha taha ʻo e ngaahi meʻá ni:

'Oku kau ai 'a e ngaahi kili

	Ngaahi Kalasi 'oku Ma'u
gridzyKili'ata'ata ko ha kamata'anga lelei ki hono fa'u ha kili 'o'ou . tomu'a sio mo'ui	`gridzySkinBlank`
gridzySkinClassic tomu'a sio mo'ui	`gridzySkinClassic` `gridzySkinClassicLight`('OKU 'OSI 'AONGA'I talu mei he liliu 2.6.0)
gridzySkinFullOverlay tomu'a sio mo'ui	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`('OKU 'OSI 'AONGA'I talu mei he liliu 2.6.0)
gridzySkinLift tomu'a sio mo'ui	`gridzySkinLift` `gridzySkinLiftLight`('OKU 'OSI 'AONGA'I talu mei he liliu 2.6.0)
gridzySkinMagnifier 'oku 'ikai kau ai 'a e ngaue fakalahi tomu'a sio mo'ui	`gridzySkinMagnifier` `gridzySkinMagnifierLight`('OKU 'OSI 'AONGA'I talu mei he liliu 2.6.0)

Ko e ngaahi kili kotoa pe 'i 'olunga 'oku fie ma'u pe ha faile CSS, ka 'oku 'i ai ha ngaahi kili kehe 'oku nau fie ma'u foki ha faile JavaScript:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>

	Ngaahi Kalasi 'oku Ma'u
gridzySkinBlur 'oku 'ikai ke ngaue 'i he IE . tomu'a sio mo'ui	`gridzySkinBlur` `gridzySkinBlurLight`('OKU 'OSI 'AONGA'I talu mei he liliu 2.6.0)
gridzySkinCard tomu'a sio mo'ui	`gridzySkinCard` `gridzySkinCardLight`('OKU 'OSI 'AONGA'I talu mei he liliu 2.6.0)

Ngaahi Fili kili

Talu mei he version 2.6.0 'oku 'i ai ha ngaahi Fili ke configure 'a e ngaahi kili 'oku langa 'i loto. Fakatatau ki he kili pau 'e lava ke ke seti 'a e lanu 'o e muimui'i, lanu 'o e tohi mo e 'ata 'o e tohi. 'Oku fie ma'u pe ke ke faka'aonga'i 'a e ngaahi koloa angamaheni 'o e CSS hange ko ia 'oku ke lava 'o sio ki ai heni:

<div class="gridzy gridzySkinClassic" style="--background: rgba(0, 80, 117, .8); --color: rgb(238, 238, 238); ">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>

  ...

</div>

Vakai ki he ngaahi kehekehe 'oku poupou'i mo e ngaahi mahu'inga default ki he kili takitaha 'i heni:

gridzySkinClassic

Kehekehe	Mahu'inga tu'uma'u	Fakamatala
`--background`	`rgba(0, 0, 0, .7)`	'oku ne faka'ata ha mahu'inga 'o e CSS 'i he muimui'i
`--color`	`rgb(255, 255, 255)`	'oku ne faka'ata ha mahu'inga lanu CSS
`--text-shadow`	`none`	faka'ata ha mahu'inga CSS tohi-'ata

gridzySkinFullOverlay

Kehekehe	Mahu'inga tu'uma'u	Fakamatala
`--background`	`rgba(0, 0, 0, .7)`	'oku ne faka'ata ha mahu'inga 'o e CSS 'i he muimui'i
`--color`	`rgb(255, 255, 255)`	'oku ne faka'ata ha mahu'inga lanu CSS
`--text-shadow`	`none`	faka'ata ha mahu'inga CSS tohi-'ata

gridzySkinLift

Kehekehe	Mahu'inga tu'uma'u	Fakamatala
`--background`	`rgba(0, 0, 0, .7)`	'oku ne faka'ata ha mahu'inga 'o e CSS 'i he muimui'i
`--color`	`rgb(255, 255, 255)`	'oku ne faka'ata ha mahu'inga lanu CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	faka'ata ha mahu'inga CSS tohi-'ata

gridzySkinMagnifier

Kehekehe	Mahu'inga tu'uma'u	Fakamatala
`--background`	`rgba(0, 0, 0, .7)`	'oku ne faka'ata ha mahu'inga 'o e CSS 'i he muimui'i
`--color`	`rgb(255, 255, 255)`	'oku ne faka'ata ha mahu'inga lanu CSS

'Oku 'ikai poupou'i 'e he kili ko 'eni 'a --text-shadow

gridzySkinBlur

Kehekehe	Mahu'inga tu'uma'u	Fakamatala
`--background`	`rgba(0, 0, 0, .7)`	'oku ne faka'ata ha mahu'inga 'o e CSS 'i he muimui'i
`--color`	`rgb(255, 255, 255)`	'oku ne faka'ata ha mahu'inga lanu CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	faka'ata ha mahu'inga CSS tohi-'ata

gridzySkinCard

Kehekehe	Mahu'inga tu'uma'u	Fakamatala
`--background`	`rgba(0, 0, 0, 1)`	'oku ne faka'ata ha mahu'inga 'o e CSS 'i he muimui'i
`--color`	`rgb(255, 255, 255)`	'oku ne faka'ata ha mahu'inga lanu CSS
`--text-shadow`	`none`	faka'ata ha mahu'inga CSS tohi-'ata

Ko e ngaahi kili kotoa pe kuo 'osi fakapapau'i 'oku nau poupou'i pe 'a e ngaahi fakamatala faingofua 'o e tohi. Te ke lava ʻo faʻu hoʻo ngaahi kili ʻoku ʻaʻau ʻaupito mo faingataʻa ange. Kataki 'o vakai ki he Sitaila Gridzy .

Sitaila Gridzy

Kapau 'oku 'ikai ha kili kuo 'osi fakapapau'i 'oku fe'unga mo ho'o ngaahi fie ma'u, 'e lava ke ke style ho'o taha.

Ko e founga faingofua tahá ko hoʻo ʻuluaki hiki ha kili ʻoku ʻi ai pea fakafeʻungaʻi ia ki hoʻo ngaahi fie maʻú. Ko e kili gridzySkinBlank kuo 'osi fakapapau'i 'e fa'a 'omi ai ha fakava'e lelei pea pehe ki ha ngaahi tohi lelei 'i he faile CSS:

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

'I he faile CSS te ke ma'u 'a e ngaahi kalasi gridzySkinBlank , gridzyImage mo gridzyCaption . 'Oku 'ikai fiema'u 'e Gridzy tonu 'a e ngaahi kalasi ko 'eni. 'Oku nau ngaue'aki pe ki he styling pea ko ia 'e lava ke ke to'o pe toe fakahingoa kinautolu kapau 'oku ke loto ki ai.

'Ikai ngata ai te ke ma'u 'a e kalasi CSS gridzyItem . 'Oku seti 'e he Gridzy 'a e kalasi ko 'eni 'otometiki ki he fanau fakahangatonu kotoa pe 'o e 'elemeniti koniteina tefito. Ko ia, te ke lava ʻo fakaʻaongaʻi ʻa e kalasi ko ʻení ke style ʻa e ngaahi meʻa ʻo hoʻo fale fakaʻaliʻalí.

Fakakaukau'i 'a e Ngaahi Me'a Mahu'inga .

ʻOku totonu ke tali kakato ʻa e ngaahi meʻa ʻi loto ʻi he meʻá. Fakakaukau ʻe liliu pau ʻa e lahi ʻo e ʻelemēnití. Faka'aonga'i 'a e ngaahi mahu'inga peseti kae 'ikai ko e ngaahi mahu'inga pixel. Pea ke vakai ki he fili fokotu'utu'u 'o e Gridzy autoFontSize , 'a ia 'oku ne ha'i 'a e font-lahi ki he lahi 'o e puha 'o e me'a.
ʻOku totonu ke maʻu ʻe he meʻa takitaha ha tafaʻaki ʻoku fakaʻuhingaʻi lelei. 'E 'ikai 'aupito liliu 'a e aspect ratio 'o e me'a pea 'oku fie ma'u ke fika'i 'a e grid. Ko ia kapau 'oku 'ikai ke 'otometiki ha me'a 'oku 'i ai ha 'atakai 'oku faka'uhinga'i lelei, predefine ia 'aki 'a e nima (eg 'o fakafou 'i he css).

'I he ngaahi me'a 'e ni'ihi, 'e faingofua ange ke style 'a e kakano 'o e ngaahi me'a kimu'a pea toki initializing 'a Gridzy. To'o pe 'a e kalasi gridzy pe ko e faile javascript Gridzy fakataimi ki he me'a ni.

Ko ia ia! Ko e me'a pe ia 'oku ke fiema'u ke langa ho'o kili 'a'au. Ko e lahi taha 'o e ngaahi kili predefined 'oku 'ikai ke ne faka'aonga'i 'a e lahi ange 'i he me'a ni.

Ka 'e lava ke toe lahi ange kapau 'oku ke loto ki ai ...

Ngaahi Kili Fakalakalaka

'Oku faka'aonga'i 'e he Gridzy 'a e ngaahi kalasi CSS lahi ange 'i gridzyItem pe . Ko e lahi taha 'o kinautolu 'e seti 'otometiki pea 'e lava ke ke faka'aonga'i kinautolu ki he styling foki.

Ngaahi Kalasi Koniteina Lahi

Hingoa ʻo e Kalasi	Fakamatala
`gridzy` ke seti to'oto'o	'Oku 'otometiki 'a e kumi 'e he Gridzy 'a e ngaahi 'elemeniti mo e kalasi ko 'eni pea initializes kinautolu.
`gridzyAnimated`	'E seti 'otometiki kapau 'oku `true` 'a e fili `animate` . Kapau 'oku seti 'a e kalasi ko 'eni 'i he nima, 'e 'otometiki 'a e fili `animate` ke ma'u ' `true` foki (tukukehe kapau 'oku fokotu'u mahino ia ki he `false` ).

Ngaahi Kalasi ʻo e Meʻa

Hingoa ʻo e Kalasi	Fakamatala
`gridzyItem`	'E seti 'i he taimi pe 'oku kamata ai 'e he me'a 'a e founga 'o e initializing. He ʻikai ʻaupito ke toʻo.
`gridzyItemInitializing`	'E seti 'i he taimi pe 'oku kamata ai 'e he me'a 'a e founga 'o e initializing. 'E fetongi 'e he `gridzyItemReady` i he taimi pe 'oku kamata'i kakato ai 'a e me'a. 'Oku 'uhinga 'oku 'ikai ko e ngaahi 'ata 'oku uta kakato (vakai ki `gridzyItemLoading` ), ka 'oku mateuteu 'a e me'a ke ma'u 'a e 'asi.
`gridzyItemReady`	'E fetongi 'a `gridzyItemInitializing` i he taimi pe 'oku kamata'i kakato ai 'a e me'a. He ʻikai ʻaupito ke toʻo. 'Oku 'uhinga 'oku 'ikai ko e ngaahi 'ata 'oku uta kakato (vakai ki `gridzyItemComplete` ), ka 'oku mateuteu 'a e me'a ke ma'u 'a e 'asi.
`gridzyItemLoading`	'E seti 'i he taimi pe 'oku kamata ai 'e he me'a 'a e founga 'o e initializing. 'E fetongi 'e he `gridzyItemComplete` 'i he taimi pe 'oku uta kakato ai 'a e ngaahi 'ata 'oku 'i ai ('oku angamaheni 'aki 'a e taha pe).
`gridzyItemComplete`	'E fetongi 'a `gridzyItemLoading` 'i he taimi pe 'oku uta kakato ai 'a e ngaahi 'ata 'oku 'i ai ('oku angamaheni 'aki 'a e taha pe). He ʻikai ʻaupito ke toʻo.
`gridzyItemInitialToVisible`	'E seti ia 'i he taimi pe 'e kamata ke 'asi mai ai 'a e me'a 'i he fuofua taimi. 'E to'o ia 'i he taimi pe 'oku 'asi kakato ai 'a e me'a.
`gridzyItemVisible`	'E seti ia 'i he taimi pe 'oku 'asi kakato ai 'a e me'a. 'E to'o ia 'i he taimi pe 'e kamata ke mole ai 'a e me'a.
`gridzyItemVisibleToHidden`	'E seti 'i he taimi pe 'e kamata ke mole ai 'a e me'a. 'E to'o ia 'i he taimi pe 'oku fufuu'i kakato ai 'a e me'a.
`gridzyItemHidden`	'E seti 'i he taimi pe 'oku fufuu'i kakato ai 'a e me'a. 'E to'o ia 'i he taimi pe 'e kamata ke 'asi mai ai 'a e me'a.
`gridzyItemHiddenToVisible`	'E seti 'i he taimi pe 'oku kamata ke 'asi mai ai 'a e me'a (tukukehe 'a e 'asi mai 'i he fuofua taimi – vakai ki he kalasi `gridzyItemInitialToVisible` ). 'E to'o ia 'i he taimi pe 'oku 'asi kakato ai 'a e me'a.
`gridzyItemVisibleToVisible`	'E seti 'i he taimi pe 'oku liliu ai ha me'a 'i he grid, ka ko e me'a 'iate ia pe na'e pea nofo 'oku 'asi. 'E to'o ia 'i he taimi pe 'e 'osi ai 'a e animation 'o e liliu.

'I he default 'a e faka'ilonga 'o e founga ngaue mo e ngaahi faka'ata ki he 'asi mo e mole 'a e ngaahi 'ata 'oku tomu'a fakapapau'i 'e he faile CSS tefito 'o e Gridzy.

'I he ngaahi kalasi CSS ko 'eni 'oku lave ki ai 'i 'olunga 'e lava ke ke style ho'o faka'ilonga founga ngaue mo e ngaahi faka'ata. Dare ha vakai ki he faile CSS tefito 'o e Gridzy, ke mahino 'a e me'a te ke ma'u ke faka'auha. No fear, 'oku fakatohi lelei 'a e me'a kotoa pe 'i ai.

Fakaleleiʻi ʻa e Uta

Kapau te ke faka'aonga'i 'a e ngaahi 'ata lahi, 'e lava ke hoko ia ko ha fakakaukau lelei ke tokoni'i 'a Gridzy ke langa vave ange 'a e grid.

Ta'ofi 'a e Puna 'a e ngaahi 'ata

'Oku fie ma'u 'e he Gridzy 'a e tafa'aki 'o e ngaahi 'ata kotoa pe ke fika'i 'a e grid. 'Oku iku 'a e ngaahi mo'oni'i me'a ko 'eni ki he ngaahi 'elemeniti puna kapau 'oku mateuteu 'a e ngaahi 'ata 'e ni'ihi pea 'oku 'ikai ke mateuteu 'a e ni'ihi kehe. Ko e lahi ange 'a e ngaahi 'ata 'oku 'i ai, ko e lahi ange ia 'a e fakatupu 'ita 'e lava ke hoko 'a e ola ko 'eni.

Ke ta'ofi 'a e 'ulungaanga ko 'eni, fokotu'u pe 'a e ngaahi 'ulungaanga ' width mo height ki he ngaahi 'elemeniti img kotoa pe. 'Oku mahu'inga ke fokotu'u 'a e ngaahi mahu'inga totonu ki he 'imisi takitaha, ka 'ikai 'e mio'i 'a e ngaahi 'imisi. Ko e ngaahi mahu'inga totonu ko e 'uluaki laulahi mo e ma'olunga 'o e 'imisi takitaha:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Hili ia pea 'e lava ke fika'i 'e Gridzy 'a e grid 'i he taimi pe ko ia 'o 'ikai fie ma'u ke 'ilo'i 'a e ngaahi lahi mo'oni 'o e ngaahi 'ata.

Uta paie

Ke uta 'a e ngaahi 'ata pe 'a ia 'oku 'i he viewport 'oku 'asi, muimui pe ki he ngaahi sitepu ko 'eni:

Fakahu 'a e ngaahi 'ulungaanga ' width mo height hange ko ia 'oku fakamatala'i atu 'i 'olunga (fakapapau'i 'oku ke faka'aonga'i 'a e ngaahi mahu'inga totonu)
Fetongi 'a e ngaahi 'ulungaanga src kotoa pe 'aki ' data-gridzylazysrc hange ko ia 'oku ha atu 'i lalo (kapau 'oku ke ma'u 'a e ngaahi 'ulungaanga srcset foki, fetongi kinautolu 'aki ' data-gridzylazysrcset ).

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Hili e ngaahi sitepu ko 'eni 'e uta 'a e ngaahi 'ata 'i he taimi pe 'oku nau ofi ai pe 'i loto 'i he viewport.

Faka'ilonga 'o e founga ngaue

Ko e faka'ilonga 'o e founga ngaue ko e ki'i faka'ilonga 'o e animated 'oku 'asi mai lolotonga 'oku uta 'a e 'imisi. Kapau te ke faka'aonga'i ' a e ngaahi fakamatala & kili , 'e fakahaa'i 'otometiki 'a e faka'ilonga 'o e founga ngaue. Ka ʻikai ʻokú ke fie maʻu ha ngaahi feʻunuʻaki:

Tuku 'a e 'elemeniti img takitaha ki ha 'elemeniti div .
(pe ki ha toe 'elemeniti kehe – vakai ki he semantic HTML ki ha me'a lahi ange)
Tānaki atu ʻa e kalasi gridzyImage ki he ʻelemēniti takitaha img

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

Hili ia 'oku totonu ke ke sio ki he ngaahi faka'ilonga 'o e founga ngaue kapau 'oku to'o 'e he ngaahi 'ata 'a e taimi ke uta.

Ngaahi filita

'Oku faingofua 'aupito 'a e ngaahi filita 'i he Gridzy ka 'oku malohi. Tatau ai pe pe ko e ha e fa'ahinga filter 'oku ke fie ma'u, 'Oku ngalingali 'aupito 'oku realizable. Ko e me'a pe 'oku ke fie ma'u, ko ha ki'i CSS mo ha ngaahi 'elemeniti foomu HTML si'isi'i ...

Ko e fakatātā ngāue ʻeni:

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Tau Langa Ia Fakasitepu .

1. 'Uluakí 'oku tau fie ma'u 'a e fokotu'utu'u HTML angamaheni 'o e Gridzy pea fokotu'u 'a e ngaahi hingoa 'o e kalasi ki he ngaahi me'a kotoa pe 'o e fale faka'ali'ali ke tau lava 'o filter kinautolu hili ia .

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

ʻI he sīpinga ko ʻení ʻoku tau fakaʻaongaʻi pē ha kalasi ʻe taha ki he ʻelemēniti takitaha. Ka 'e lava foki ke ke seti ha ngaahi kalasi lahi ki ha 'elemeniti 'e taha, kapau 'oku totonu ke ma'u 'a e 'elemeniti ko ia 'o fakafou 'i he ngaahi filita lahi.

2. Pea 'oku tau tanaki atu ha ngaahi button 'e ni'ihi 'a ia 'e lava ke tau liliu 'a e ngaahi filita pea .

<button value="*">All</button>
<button value=".animals">Animals</button>
<button value=".architecture">Architecture</button>
<button value=".people">People</button>

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Kae 'ikai ko e ngaahi buttons, 'e lava foki ke ke faka'aonga'i 'a e ngaahi 'elemeniti kehe 'o e foomu hange ko e ngaahi puha fakamo'oni, ngaahi buttons letio, fili 'a e ngaahi mala'e mo e me'a pehe.

Hange ko ia 'oku ke lava 'o sio ki ai, ko e ngaahi mahu'inga 'o e ngaahi buttons ko e ngaahi fili CSS angamaheni. Ko 'etau 'osi pe, ko ha lomi'i 'i ha button pehe 'e fakahaa'i 'a e ngaahi 'ata 'oku fe'unga mo e fili CSS ko ia. Fakatekinikale 'oku ne seti pe 'a e fili ' filter ki he mahu'inga ko 'eni.

Te ke lava foki ʻo fakaʻaongaʻi ha ngaahi fili ʻoku lahi ange ʻene faingataʻá. Hange ko 'eni :not(.animals) 'e ngaue foki, pea pehe ki .animals.people mo .animals, .people .

3. Faka'osi, 'Oku tau encapsulate 'a e ngaahi button 'i ha koniteina div pea ha'i kinautolu ki he fale faka'ali'ali Gridzy, 'aki hono fokotu'u 'o e fili filterControls :

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Hange ko ia 'oku ke lava 'o sio ki ai, 'Oku tau toe faka'aonga'i ha fili CSS ki he fili filterControls . Ko e koniteina div mo e id attribute 'oku ne ngaue pe ke faingofua ange 'a e ngaahi buttons ke fili 'o fakafou 'i he fili CSS ko ia.

Ko ia ia!

Kapau 'oku ke sai'ia ange 'i ha fakalelei'anga JavaScript, vakai ki he API .

API

Neongo 'oku 'i ai 'a e Gridzy 'a 'ene API, 'e lava ke fai 'a e lahi taha 'o e ngaahi me'a 'o 'ikai ha'ane, 'aki pe hono manipulate 'o e DOM. ʻE fakatokangaʻi ia ʻe Gridzy pea fakatonutonu ʻa e grid. Ka 'oku 'i ai foki mo ha API malohi 'aupito ...

Ko hono fakalele 'o e DOM

Ki he ngaahi manipulations kotoa pe 'o e me'a 'o e tohi (DOM) 'oku tau 'uluaki fie ma'u 'a e 'elemeniti 'o e koniteina:

// get the container element
var gridzyElement = document.querySelector('.gridzy');

Tānaki atu ha ngaahi ʻata

'Oku mahu'inga ke langa kakato mo fakafonu 'a e 'elemeniti fo'ou 'o e tamasi'i kimu'a pea ke toki tanaki atu ia ki he 'elemeniti 'o e koniteina. Ka 'ikai 'e 'ikai lava 'e Gridzy 'o 'ilo'i 'a e ngaahi tafa'aki totonu.

// create a new img element
var newImage = document.createElement('img');

// add src attribute (!! before you add it to the container element !!)
newImage.src = 'https://loremflickr.com/640/480';

// add it as last element to the container element
gridzyElement.appendChild(newImage);

// or as first element (or anywhere in between)
gridzyElement.insertBefore(newImage, gridzyElement.firstChild);

To'o 'a e ngaahi 'ata

// remove the first image
gridzyElement.removeChild(gridzyElement.firstElementChild);

Liliu e Ngaahi Fili

// change the spaceBetween option to a specific value
gridzyElement.setAttribute('data-gridzy-spaceBetween', '10');

// change the layout option to a specific value
gridzyElement.setAttribute('data-gridzy-layout', 'waterfall');

// reset the spaceBetween option to its default value
gridzyElement.removeAttribute('data-gridzy-spaceBetween');

Lahi ange fekau'aki mo hono manipulate 'o e DOM 'e lava ke ke ma'u 'i he MDN uepi docs . 'Oku 'i ai foki mo e Fakafe'iloaki ki he DOM ' oku ma'u.

API 'o e 'ea

Ke faka'aonga'i 'a e API, 'Oku tau 'uluaki fie ma'u 'a e Gridzy instance, 'a ia 'oku ha'i ki he 'elemeniti 'o e koniteina Gridzy:

// get the Gridzy instance
var gridzyInstance = document.querySelector('.gridzy').gridzy;

Maʻu ʻa e Fili

// get the value of a single option
var currentLayout = gridzyInstance.getOption('layout');

Maʻu ʻa e Ngaahi Fili Kotoa pē

// get all option values as an object
var currentOptions = gridzyInstance.getOptions();

Seti e Ngaahi Fili

// set specific option values
gridzyInstance.setOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

// or reset options to their default values
gridzyInstance.setOptions({
  spaceBetween: null,
  layout: null
});

Faka'aonga'i 'a e Filter

Ko hono faka'aonga'i 'o ha filter ko hono fokotu'u pe 'o e filter fili 'e lava ke hoko ko ha fili CSS 'oku 'aonga:

// set the filter to match items with class "animals"
gridzyInstance.setOptions({
  filter: '.animals'
});

// reset the filter to match all items again
gridzyInstance.setOptions({
  filter: '*'
});

// set the filter to match items without class "animals"
gridzyInstance.setOptions({
  filter: ':not(.animals)'
});

// set the filter to match items with class "animals" or "people"
gridzyInstance.setOptions({
  filter: '.animals, .people'
});

// set the filter to match items that have both classes, "animals" and "people"
gridzyInstance.setOptions({
  filter: '.animals.people'
});

Tānaki atu ʻa e Ngaahi Ngaue Callback

'OKU 'OSI 'AONGA'I talu mei he version 2.4.0.
Fakaʻaongaʻi ʻa e ngaahi Meʻa Fakaonopooni mo ʻoku toe feʻunga angé kae ʻikai. Vakai ki he konga hono hokó ki he fakaikiikí.

~~Gridzy.js 2 poupou'i 'a e ngaahi fili 'e ni'ihi ki he ngaahi ngaue callback. 'E lava ke nau seti pe 'o fakafou 'i he API 'o e proprietary, ka 'oku hange pe ko e ngaahi fili kehe:~~

// same as set other options
gridzyInstance.setOptions({
  onOptionsChanged: function() {
    // will be executed each time the options have changed.
  },
  onBeforeOptionsChanged: function() {
    // will be executed, before new options take effect.
  }
});

	~~Fakamatala~~
~~`onBeforeOptionsChanged`~~	~~Callback ngaue 'oku ui fakahangatonu kimu'a pea toki fokotu'u 'a e ngaahi fili.~~
~~`onOptionsChanged`~~	~~Callback ngaue 'oku ui fakahangatonu hili hono fokotu'u 'o e ngaahi fili.~~
~~`onBeforeRender`~~	~~Callback ngaue 'oku ui fakahangatonu kimu'a pea toki fakahoko.~~
~~`onRender`~~	~~Callback ngaue 'oku ui fakahangatonu hili hono fakahoko.~~

Ngāueʻaki ʻa e Ngaahi Meʻa ʻoku hokó

talu mei he liliu 2.4.0.

Te ke lava 'o faka'aonga'i 'a e ngaahi me'a 'oku hoko 'i he Gridzy 'o hange tofu pe ko e ngaahi me'a 'oku hoko 'i he JavaScript angamaheni:

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

'Oku fana'i 'a e ngaahi me'a 'e ni'ihi 'i he 'elemeniti 'o e koniteina Gridzy pea 'oku fana'i 'a e ngaahi me'a kehe 'i he ngaahi 'elemeniti 'o e me'a fakafo'ituitui 'i loto 'i he 'elemeniti 'o e koniteina.

Ngaahi me'a na'e fana'i 'i he 'elemeniti koniteina Gridzy:

	Fakamatala
`gridzyBeforeInit`	Ngaahi afi kimu'a pea toki kamata'i 'a e fale faka'ali'ali.
`gridzyInit`	Ngaahi vela hili hono kamata'i 'o e fale faka'ali'ali.
`gridzyBeforeOptionsChanged`	Fires kimu'a pea toki fokotu'u 'a e ngaahi fili.
`gridzyOptionsChanged`	Fires hili hono fokotu'u 'o e ngaahi fili.
`gridzyBeforeRender`	Ngaahi afi kimu'a pea toki fakahoko.
`gridzyRender`	Ngaahi afi hili hono fakahoko.

Kapau 'oku ke misi ha ngaahi me'a 'oku hoko heni, kataki 'o 'ave ha kole poupou .

event.target oku ne 'omi 'a e 'elemeniti 'o e koniteina Gridzy.
event.detail.instance 'oku ne 'omi 'a e fakatata 'o e Gridzy.

Ngaahi me'a na'e hoko 'i he ngaahi 'elemeniti 'o e me'a:

	Fakamatala
`gridzyItemBeforeInit`	Fires kimu'a pea toki kamata'i 'a e me'a.
`gridzyItemInit`	Fires hili hono kamata'i 'o e me'a.
`gridzyItemLoading`	Fires 'i he taimi 'oku kamata ke uta ai 'a e me'a.
`gridzyItemReady`	Fires 'i he taimi 'oku mateuteu ai 'a e me'a ki he fika'i 'o e grid. Ko ia 'oku 'ilo'i 'a e aspect ratio, ka 'e kei uta nai 'a e 'imisi.
`gridzyItemComplete`	Fires 'i he taimi 'oku uta kakato ai 'a e 'imisi 'o e me'a.

Kapau 'oku ke misi ha ngaahi me'a 'oku hoko heni, kataki 'o 'ave ha kole poupou .

event.target oku ne 'omi 'a e 'elemeniti 'o e me'a takitaha.
event.detail.instance 'oku ne 'omi 'a e fakatata 'o e Gridzy.

API – Fakamamani Lahi

'Oku 'i ai ha ngaahi ngaue 'oku tau'ataina mei he ngaahi fakatātā 'o e Gridzy. Ko ia 'oku 'ikai fie ma'u ke tau ma'u ha instance kimu'a.

Ma'u 'a e Fili 'o e Default

// get the default value of a single option
var defaultLayout = Gridzy.getDefaultOption('layout');

Ma'u 'a e ngaahi fili Default kotoa pe

// get all default option values as an object, including the default layout options of the default layout
var defaultOptions = Gridzy.getDefaultOptions();

// or get all default option values, including the default layout options of a specific layout
var defaultOptions = Gridzy.getDefaultOptions('waterfall');

Seti ʻa e Ngaahi Fili ʻo e Default

'Oku 'ikai ke fokotu'u 'e he me'a ni 'a e ngaahi fili 'o e ngaahi me'a kotoa pe kuo 'osi initialized Gridzy, ka 'oku ne fakamatala'i 'a e makatu'unga ki he ngaahi me'a fo'ou. Ka neongo ia, kapau ko ha fili 'o ha instance 'oku 'i ai 'e toe fakafoki 'o fakafou 'i he mahu'inga null , te ne faka'aonga'i 'a e mahu'inga fo'ou 'o e default.

// set default option values
Gridzy.setDefaultOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

Te ke lava 'o faka'aonga'i 'eni ke seti 'a e ngaahi fili 'i mamani lahi, kapau te ke ui ia kimu'a pea toki mateuteu 'a e DOM. Ko ia he ʻikai ke ke toe fie maʻu ke seti ʻa e ngaahi filí ko ha ngaahi ʻulungaanga.

Ngaahi meʻa ʻotomētiká

Lolotonga 'oku ngaue 'a e ngaahi 'otometiki kotoa pe 'o e Gridzy.js 2, 'Oku 'ikai ha fie ma'u ki he ngaahi founga 'i lalo. Ka 'e lava ke mate 'a e automatisms ke faka'aonga'i 'a e Gridzy 'i ha founga tukufakaholo ange:

// disable automatic initializations
Gridzy.setDefaultOptions({
  autoInitOnDomReady: false,
  autoInitOnDomMutation: false
});

// or switch off all mutation observers
Gridzy.setDefaultOptions({
  autoInitOnDomMutation: false,
  autoSyncChildListMutation: false,
  autoSyncAttributesMutation: false,
  autoSyncChildClassMutation: false,
  autoSyncImageMutation: false
});

Ko e ni'ihi 'o e ngaahi fili ko 'eni 'oku 'ikai lava ke seti 'o fakafou 'i data-gridzy- 'ulungaanga pe 'o fakafou 'i setOptions() , koe'uhi ko e ngaahi 'uhinga fakalokiloki:

	Mahu'inga tu'uma'u	Fakamatala
`autoInitOnDomReady`	`true`	'Oku ne 'ilo'i 'a e ngaahi 'elemeniti mo e kalasi `gridzy` 'i he uta 'o e peesi pea initializes kinautolu. 'E lava ke fokotu'u 'o fakafou 'i `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	'Oku ne 'ilo'i 'a e ngaahi 'elemeniti fo'ou mo e kalasi `gridzy` 'i he taimi pe 'oku nau 'asi mai ai 'i he DOM pea initializes kinautolu. (eg 'i hono faka'aonga'i 'o e ngaahi liliu 'o e peesi) 'E lava ke fokotu'u 'o fakafou 'i `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	'Oku ne 'ilo'i pe 'oku tanaki atu pe to'o 'a e ngaahi 'elemeniti 'o e tamasi'i (ngaahi 'ata), pea fakafo'ou 'otometiki 'a e grid. 'Oku lava ke fokotu'u 'o fakafou 'i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Faka'uhinga'i pe 'oku faka'aonga'i lahi 'a e ngaahi 'ulungaanga ' `data-gridzy-` pe 'ikai. Kapau ko e ngaahi fili `false` 'eni 'e lava ke seti pe 'o fakafou 'i he API 'o e proprietary. 'Oku lava ke fokotu'u 'o fakafou 'i `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	'Oku ne 'ilo'i 'a e ngaahi liliu 'o `data-gridzy-` 'ulungaanga, pea fakafo'ou 'a e grid 'otometiki. Foki 'oku ne 'ilo'i pe 'oku tanaki atu pe to'o 'a e kalasi `gridzyAnimated` pea kapau 'oku hoko 'a e ngaahi liliu 'o e 'ulungaanga ' `style` . Kapau 'oku `false` 'a `useOptionAttributes` , 'oku ne 'ilo'i 'a e ngaahi liliu 'o e 'ulungaanga ' `style` pe. 'Oku lava ke fokotu'u 'o fakafou 'i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	'Oku ne 'ilo'i 'a e ngaahi liliu 'o e ngaahi 'ulungaanga ' `class` 'o e ngaahi 'elemeniti kotoa pe 'o e tamasi'i (ngaahi 'ata). Fekau'aki fekau'aki mo e ngaahi filita. 'Oku lava ke fokotu'u 'o fakafou 'i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver talu mei he liliu 2.5.0.	`true`	'Oku ne 'ilo'i 'a e ngaahi liliu 'o e ngaahi 'ulungaanga `src` 'o e ngaahi 'ata kotoa pe. Fekau'aki 'i he taimi 'oku faka'aonga'i ai mo e React pe ngaahi laipeli tatau. 'Oku lava ke fokotu'u 'o fakafou 'i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Toelahi ʻo e Sio talu mei he liliu 2.6.0.	`true`	'Oku ne 'ilo'i 'a e ngaahi liliu 'o e 'elemeniti 'o e laulahi. Fekau'aki fekau'aki mo e tisaini tali. (Kimu'a 'i he version 2.6.0 na'e faka'aonga'i ha fanongo 'o e me'a na'e hoko resize 'a e matapa sio'ata) 'Oku lava ke fokotu'u 'o fakafou 'i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Fakamata'i To'oto'o

// initialize a new Gridzy instance
var gridzyInstance = new Gridzy(document.querySelector('.gridzy'), {
  spaceBetween: 10,
  layout: 'waterfall'
});

Faka'auha 'a e Instance .

Na'e pehe 'e he Roughly, ko e fehangahangai 'o e initializing 'a Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sync Lisi 'o e fanau 'i he nima

// after child elements (images) are added to or removed from the DOM.
gridzyInstance.syncChildList();

Sync ha 'Elemeniti 'o e Tamasi'i 'e Taha 'i he To'oto'o .

‘Oku ‘ikai ke fa‘a fiema‘u ia, tukukehe ‘a e ngaahi me‘a ‘oku tātātaha ‘aupito ke hoko.

// after child elements (images) are added to the DOM and only one of them should be synced to Gridzy.
gridzyInstance.syncChild(childElement);

Sync 'a e ngaahi 'ulungaanga 'i he tohi

Fakatokanga'i ange 'oku pau ke true a e fili useOptionAttributes ki he me'a ni.

// after data-gridzy- attributes have changed
gridzyInstance.syncAttributes();

Fakahoko Fakamālohi

'Oku 'ikai fie ma'u 'a e angamaheni, neongo kapau 'oku tamate'i 'a e ngaahi 'otometiki kotoa pe .

gridzyInstance.render();

Palakini WordPress

Laipeli JavaScript

Ngaue tokoni