[Javascript] Fullscreen Grid

[Storm90]

Hallo allemaal,

Ik ben bezig met een Narrowcasting project voor mijn werk. Dit wordt een presentatie video voor op het scherm, binnen het bedrijf. Het idee is dat er van één willekeurige klant een grid wordt getoond met de gemaakte projecten, waaruit vervolgens één willekeurig project wordt gekozen en uitgebreid vertoond. Dit blijft dan continue loopen. Het grid met alle projecten is echter een punt waar ik nu op vast loop.

Ik ben al even bezig met het grid en het leek goed te gaan, echter zijn ze hier op het bedrijf nog niet helemaal tevreden. Dit is een voorbeeld van hoe dit er nu uitziet, met dummy images:
Zoals je ziet staan er dubbele afbeeldingen (= projecten) in, en dat willen ze hier niet hebben.

Ik heb hierbij gebruik gemaakt van Mason.js. Het probleem met Masonry en Isotope was voornamelijk dat er grote ruimtes tussen afbeeldingen ontstonden die niet werden opgevuld. Dat is de reden dat ik uiteindelijk voor mason heb gekozen. Het enige probleem met Mason.js is eigenlijk nog dat het standaard niet fullscreen werkt, maar dat heb ik dan zelf nog weten op te lossen, zie http://stackoverflow.com/...479?noredirect=1#21751479

Het laatste probleem is nu dus dat Mason.js eerst willekeurige blokken plaatst en vervolgens de gaten opvult met kopieën (klonen) van huidige divs. Wat ze hier liever zien is dat er eerst wordt gekeken hoeveel projecten er zijn, bijvoorbeeld 5, en dat er vervolgens wordt uigerekend hoe hier een fullscreen grid van gemaakt kan worden. En welke bij elke refresh ook steeds anders is.

Het wordt voor mij nu al een behoorlijke uitdaging. Mijn vraag is eigenlijk of hier iemand weet of een dergelijk systeem toch al ergens te vinden is, voordat ik het wiel alsnog opnieuw uitvind , of dat jullie mij een goede stap in de juiste richting kunnen geven .

EDIT: JSFiddle: http://jsfiddle.net/LqpTm/

EDIT 2: Laat ik het anders vragen. Is het mogelijk om de divs te mergen tot ik het aantal van 5 divs overhoud (om zomaar even een aantal op te noemen)? Nu werkt het namelijk perfect, alleen de dubbele divs moeten weg. Het eenvoudigste zou naar mijn mening zijn, mergen tot ik er weer 5 overhoud en de inhoud opnieuw verdelen.

[ Voor 9% gewijzigd door Storm90 op 24-02-2014 16:26 ]

[MueR]

Even een schopje naar Webdesign, Markup & Clientside Scripting

Ah, de nadelen van off-the-shelf plugins. Je zal waarschijnlijk even door die code willen steppen om te kijken waar die blokken gemaakt worden en vooral hoe de groottes worden berekend. Dat kan je vervolgens waarschijnlijk relatief eenvoudig aanpassen naar eigen wensen.

[ Voor 63% gewijzigd door MueR op 25-02-2014 10:25 ]

[TheNephilim]

Maar, als ik dan de documentatie van Mason.js lees, zie ik dit:

What if I need specific sized elements vs random?
MasonJS has a special array built in called "Promoted" this will allow you to explicitly tell mason what size you want specific elements based on a classname.

Is dat niet wat je nodig hebt?

[Storm90]

Ah, de nadelen van off-the-shelf plugins. Je zal waarschijnlijk even door die code willen steppen om te kijken waar die blokken gemaakt worden en vooral hoe de groottes worden berekend. Dat kan je vervolgens waarschijnlijk relatief eenvoudig aanpassen naar eigen wensen.

Nou, het probleem is dat Mason zelf randomized de verhoudingen kiest uit een array, welke je zelf kunt invullen ([1,2] [2,2] [1,1] etc). De huidige divs worden op het scherm geplaatst met een float:left, iedere div een willekeurige verhouding. Uiteraard kan dit niet zonder dat er lege ruimtes ontstaan. Dus vervolgens zoekt die de lege ruimtes op en vult die deze met duplicates (clones).

Maar wat ik eigenlijk wil is dat die lege ruimtes worden opgevuld met de huidig aanwezige divs, geen klonen. En dat maakt het zo lastig... Een div stretchen om die ruimte op te vullen lijkt onmogelijk, omdat je eerst moet achterhalen welke div gestretched kan worden zonder dat deze over een andere div valt. Dus een andere benadering is dan nodig, maar ik kan zo niets meer bedenken.

Maar, als ik dan de documentatie van Mason.js lees, zie ik dit:
quote:
What if I need specific sized elements vs random?
MasonJS has a special array built in called "Promoted" this will allow you to explicitly tell mason what size you want specific elements based on a classname.
Is dat niet wat je nodig hebt?

Nee dat is niet wat ik zoek. Ik wil geen gedupliceerde divs in mijn grid, wat Mason doet om de lege ruimtes op te vullen die ontstaan bij het creëren van een grid (wat je ook ziet bij isotope en masonry). Maar tegelijkertijd wil ik ook geen lege ruimtes...

We hebben het nu tijdelijk opgelost door zelf templates te maken mbv html en css.
We hebben 12 folders gemaakt (12 lijkt de absolute maximum van het aantal projecten dat op het scherm weergegeven zal worden) en iedere folder bevat een x-aantal templates waarin het huidige aantal projecten passen. Ik count de array met projecten die ik terug krijg uit de database, en aan de hand van het aantal projecten pak ik uit de juiste folder (1 t/m 12 dus) een willekeurige template.

[ Voor 4% gewijzigd door Storm90 op 25-02-2014 11:02 ]