U mnie …it works! ;)
a kod, który sprawdzałem to ten:
Kolumny
#main{display: flex;
align-items:stretch;
min-height:10px;
}
#pierwszy{width:30%;
min-height:100%;
background-color:blue;
margin:1px;
}
#drugi{width:30%;
min-height:100%;
background-color:red;
margin:1px;
}
#trzeci{width:30%;
min-height:100%;
background-color:yellow;
margin:1px;
}
a
a
aaa
]]>ja tak na szybkiego zrobiłem …i jakoś ok ;)
Kolumny
#pierwszy{width:30%;
min-height:600px;
background-color:blue;
float:left;}
#drugi{width:30%;
min-height:600px;
background-color:red;
float:left;}
#trzeci{width:30%;
min-height:600px;
background-color:yellow;
float:left;}
]]>> Niemniej jednak Karen Menezes się napracowała tworząc tego pena.
Nie umniejszając Karen, nie jest to aż tak trudne. Flexbox to chyba najlepiej przemyślana rzecz z CSS3 i to po prostu widać ;) Osobiście gridy trzymam już tylko w nim, z małym fallbackiem dla IE.
Pokaż jak to wyrównać w CSS.
]]>requestAnimationFrame(function() {
$boxes.makeEqual();
});
I mam pozamiatane. To jest właśnie elastyczność.
]]>Poza tym Twoje rozwiązanie nie działa z obrazkami i wymaga dużych zmian, żeby zacząć… Moje, w wypadku gdy repaint ograniczy się tylko i wyłącznie do chwil, gdy zmieniła się wydajność, rozwiązywałoby ten problem i nie powodowało dużego narzutu.
Poza tym – jeśli rAF pozwala na płynną animację zawartości canvas, to do określenia równych kolumn jest wystaraczające
]]>rAF, nie RAF :P requestAnimationFrame, czyli podstawa Animation API, zarówno w CSS, jak i JS
]]>btw. dla mnie RAF to lotnictwo UK, więc jakbyś mógł jaśniej to by było lepiej
]]>Osobiście bym zrobił z tego IINFE i odpalał rekurencyjnie rAF, gdybym już musiał coś takiego zrobić (analogicznie do display systemu w grach/wysokowydajnościowych aplikacjach)
]]>Jeżeli znasz jakieś gotowe rozwiązania, które spełniają w/w zadania to chętnie poznam.
]]>>Gdy się wczyta, zawsze można wywołać makeEqual i to załatwia sprawę.
Strona czy obrazek? Jeśli to drugie, to ustalenie czy obrazek na pewno się wczytał wcale nie jest takie proste (zwykłe load lubi oszukiwać).
Gdy się wczyta, zawsze można wywołać makeEqual i to załatwia sprawę.
]]>>Nie ma(?) idealnego rozwiązania.
IIFE
>hm?
No przecież obrazki również zmieniają wysokość strony (zwłaszcza te RWD, nie mogące mieć wszak narzuconych z góry rozmiarów). Kiedy taki obrazek się wczyta, wielkość strony automatycznie się zmienia, ale resize event nie odpala się. To samo stanie się w przypadku lazy load, więc przy obrazkach Twój sposób zupełnie nie wypali. Rozwinięcie „natywnego spoilera” (details) nie odpala resize. W sumie mało co odpala resize, więc to tak naprawdę rozwiązanie pod bardzo konkretny przypadek ;) W tym wypadku naprawdę pozostaje timer a to z góry przekreśla dużą wydajność (rAF może ją zapewnić, ale w tym wypadku mamy bardzo ograniczone wsparcie: stare IE odpadają w przedbiegach)
btw this.resizeTimer brudzi global scope – po co?
]]>Pisany był na szybko, więc jak ktoś znajdzie sposób na ulepszenie to niech da znać. Gwiazdki/stars miło widziane :)
Demo na codepen.io: http://codepen.io/MichalRazorZalecki/pen/flHqw
Gist: https://gist.github.com/MichalRazorZalecki/9b4a79fdba85edf14a53
Inna rzecz, że to i tak jest to wydajniejsze od rozwiązania w JS, które wymaga zabawy ze zdarzeniami resize, orientationchange i przy każdej zmianie wysokości strony (a może się zmienić od wszystkiego ;)). Nie użyjemy debounce’a i już mamy problem.
]]>Na marginesie – nie pochwalam wykorzystania całego Foundation tylko po to żeby wyrównać kolumny, chodzi mi o sam fakt stosowania JS tak jak tutaj np.: http://css-tricks.com/equal-height-blocks-in-rows/
]]>