NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Packery

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
hankova31
Člen
Avatar
hankova31:6.6.2019 9:31

Ahoj, nemá někdo zkušenost s touhle knihovnou https://packery.metafizzy.co/ ? Dá se zde v gridu vytvořit více sloupců než 12 případně jak?

Děkuji.

 
Odpovědět
6.6.2019 9:31
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6.6.2019 11:19

Myslim, ze s tim zbytecne ztracis cas. Zkus bootstrap/css/js i bez js. Tam mas sloupce definovane primo v css. neni problem dopsat dalsi kod.

Edit: Beru zpet, ty to asi chces kvuli tomu drag-drop efektu, ne jen kvuli layoutu.

Editováno 6.6.2019 11:21
 
Nahoru Odpovědět
6.6.2019 11:19
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6.6.2019 11:28

https://packery.metafizzy.co/options.html
mozna columnWidth, prepisuji hodnotu podle class v css

<style>
/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }
</style>
// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true

<!-- in HTML --> (uplne nahore na te strance je jak se to inicializuje s parametry)

<div class="grid" data-packery='{ "itemSelector": ".grid-item", "gutter": 10 }'>
 
Nahoru Odpovědět
6.6.2019 11:28
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6.6.2019 11:36

Mozna se vyjadruji prilis divne...

Rekneme, ze se program normalne spousti v JS/jquery

var program;
program = new program(); // vytvoreni objektu
program.spustiMe() // spusteni funkce z objektu

A nektere programy umiznuji predtim nastavit ruzne moznosti a nebo v dobe spousteni.

program = new program({a:123}); // vytvoreni + inicializace
program.spustiMe()
//nebo
program = new program(); // vytvoreni
program.spustiMe({a:123}) // inicializace + spusteni

Faze, kdy se neco provede pred spustenim hlavni funkce se nazyva inicializace.

Tve stranky jsem nevidel, nemuzu rici, kterou z tech 3 moznosti nahore na te strance mas pouzit. jquery nebo vanila nebo html. Staci jedna z nich.

 
Nahoru Odpovědět
6.6.2019 11:36
Avatar
hankova31
Člen
Avatar
Odpovídá na Peter Mlich
hankova31:6.6.2019 11:39

Potřebuji to právě kvůli drag and drop, jinak bych to udělala jinak, jenže sloupců potřebuji zkrátka více než 12 a co jsem koukala tak všechny knihovny co jsem k tomu nějak našla tak jsou napsané na max. 12 sloupců a nevím si rady jak to upravit. S tou sirkou jsem to taky zkoušela, jen se změní šířka, ale sloupců zůstane max. 12...

 
Nahoru Odpovědět
6.6.2019 11:39
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6.6.2019 13:02

Pokud je to fixne 12, tak si to prepis v js kodu na jine cislo

Na teto strance jsem prepsal tyto cisla a podle mne to nejak prizpusobuje pocet sloupcu.
https://codepen.io/…ro/pen/fGrKe

.grid-sizer {  width: 5%;}
.grid-item--width2 { width: 10%; }
.grid-item--height2 { height: 200px; }

$('.grid').isotope({
  layoutMode: 'packery',
  itemSelector: '.grid-item',
  percentPosition: false,
  packery: {
    gutter: 2
  }
});
 
Nahoru Odpovědět
6.6.2019 13:02
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:6.6.2019 13:12

https://codepen.io/…ro/pen/fGrKe
do html jsem si nakopiroval asi 20x <div class="grid-item"></div> nebo <div class="grid-item">1</div>
.grid-sizer { width: 5%;}
.grid-item--width2 { width: 10%; }
gutter: 12
na jedne sirce okna mam 17 obdelnicku(proto ty cisla uvnitr divu)
na jine 16 ctverecku
On nejspis vypocita pocet moznych sloupcu a pak se snazi nejak roztahnout ty obdelnicky, pokud jsou resene na %.

 
Nahoru Odpovědět
6.6.2019 13:12
Avatar
hankova31
Člen
Avatar
hankova31:6.6.2019 13:18

Díky, s tímhle už asi něco udělám!

 
Nahoru Odpovědět
6.6.2019 13:18
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.