[jQuery] Grid met tegels, ongelijke tegels, breinbreker

[xoniq]

Beste mede Tweakers,

Ik ben bezig met een grid systeem voor een klant, ik kies hier voor bepaalde reden voor een custom build systeem.
Hiervoor bouw ik een jQuery plugin, waarbij ik een grid initialiseer op basis van een div (de grid) diverse divs daar binnen (tiles) en daar nog een div in (tile-content-wrapper) waar de stijling op komt.
Als opties kan ik opgeven hoe breed te grid is in kolommen, en hoe hoog in rijen.
Dan ga ik door alle 'tegels' heen binnen de grid, en geef ik deze de breedte en hoogte van de grid div gedeeld door de aantal rijen of kolommen hoog, dit stop ik vervolgens in een 'reload' script die ook opgeroepen wordt bij het resizen van het scherm.

Het werkt tot zover allemaal prima, ook met resizen.
Echter wil ik random 1x1 tot 3x3 tegels kunnen weergeven. (Dus ook 1x3, 2x1 2x3 etc.)
Maar de tegels zijn allemaal gepositioneerd als een 'float'. Dit werkt prima doordat het allemaal specifieke breedtes en hoogtes hebben qua de viewport.
Maar stel ik wil een 2x2 tegel hebben, en daar weer een 1x1, en dan wordt er een 3,2 tegel geplaatst, komt daar tussenin niet meer 1 omdat floaten zo gewoon niet werkt.

Heeft iemand enig idee hoe ik dit kan oplossen?
Qua werking, wordt de tegel grootte van 1 tegel vooraf weggeschreven in een var, de 2x1 tegel wordt gewoon met 2*tileWidth en 1*tileHeight bepaald.
Dit staat verder in een loop die door te 'tile' div's heen loopt.
Deze functie wordt bijvoorbeeld aangeroepen vanuit de loop:

code:

parseTile = function( tileEl, tileId, index ){
    // Set tile size
    tileEl.css( 'width', ( tileWidth * randx ) + 'px' )
          .css( 'height', ( tileHeight * randy ) + 'px' );
}

De loop zelf (waar tiles een array is met de tegels):

code:

$.each( tiles, function( index, tile ){
    parseTile( tile.el, tile.id, index );
} );

Dit is weer de setting waar ik nu in zit, randx en randy hebben nu gewoon allebei de waarde 1. Hier stond eerst een random waarde in tussen 1-2-3.
Maar ik denk dat ik met een float al op de verkeerde weg zit, en dit al beter een position:absolute; kan zijn, maar ik vind het lastig om dan posities te gaan bepalen en ervoor te zorgen dat de grid mooi volledig ingevuld wordt.

[incaz]

Volgens mij is dit wat je zoekt: http://masonry.desandro.com/

[BramT]

Deze heeft zelfs nog wat meer opties: http://isotope.metafizzy.co/layout-modes/masonry.html
(Let op, commercial license van 25,-)

Je geeft aan "ik kies hier voor bepaalde reden voor een custom build systeem.", maar zonder die reden ga je van ons toch bestaande oplossingen krijgen. Het heeft simpelweg geen zin om het wiel opnieuw uit te vinden...

[incaz]

Bovendien is masonry open source, dus je kunt altijd zelf in de source kijken hoe men het daar heeft aangepakt.

[FotW]

Waarom gegbruik je geen flexbox of css columns, want volgens mij is dit prima zonder jQuery op te lossen?

[Bosmonster]

Een nieuwere versie van masonry is Packery overigens:
http://packery.metafizzy.co/

Dit zijn redelijk complexe issues die niet met alleen styling zijn op te lossen. Je zult op een intelligente manier de boxen in elkaar moeten passen en dat is een behoorlijk pittige wiskundige opgave.

[ Voor 4% gewijzigd door Bosmonster op 13-08-2014 17:09 ]

[Verwijderd]

Ik heb hier een tijdje geleden een jquery plugin voor geschreven maar nooit gereleased wegens dramatisch lelijke code. Het is inderdaad een pittig probleem en bij bepaalde combinaties zelfs niet oplosbaar.



Ik zal morgen kijken of ik het alsnog op github kan zetten.