Javascript Artikel Layout

Dit scrip zorgt voor de layout van de artikelen.

Logica van het scrip#

Het scrip voert het volgende uit om de artikelen in positie te brengen.

1. Hoe breed is een kolom?
2. Hoeveel kolomen passen er in in de wrapper.
3. Welke kolom is de kleinste in hoogte
4. Plaats de artikel in de kleinste kolom.
5. Herhaal stap 3 en 4 tot dat er geen artikelen meer te plaatsen zijn.

Global Variables#

var colCount = 0;
var colWidth = 0;
var margin = 10;
var wrapperWidth = 0;
var Collums = [];
var max = 0;

Html#

Scrip function setupCollums();#

wrapperWidth = $('#wrapper').width();
colWidth = $('.artikel_wrapper').outerWidth();
colCount = Math.floor(wrapperWidth/(colWidth + margin));
Collums = [];
for (var i=0;i<colCount;i++) {
        Collums.push(margin);
}
positionArticel();

Deze functie zoekt uit hoeveel kolommen er in de wrapper passen en plaast deze in de Collums als array elementen. De value van deze elementen is de hoogte van een kolom. De functie gaat af als de windows is geladen of de window word geschaald met behulp van de onload="setupCollums();" en onresize="setupCollums();" in de body tag van de html pagina. wrapperWidth is de breedte van de wrapper waar de artikelen in moeten komen. colWidth neemt de breedte van een artikel. Een kolom heeft de zelfde breedte als een artikel. In colCount word berekent hoeveel kolommen er in de wrapper passen. Hierin word ook de margin mee genomen. De margin van 10px word bij de colWidth opgeteld.

In Collums is elk element een kolom. Elke kolom die word aangemaakt is nog maar 10px(Dit is de margin die boven in de wrapper komt.). Zodra de artikelen in de kolommen worden geplaatst zal dit veranderen. MetpositionArticel(); zal de value van de array elementen worden verhoogt.

Function positionArticel();#

$('.artikel_wrapper').each(function(){
  var min = Array.min(Collums);
  var index = $.inArray(min, Collums);
  var leftPos = margin+(index*(colWidth+margin));
  $(this).css({
      'left':leftPos+'px',
      'top':min+'px'

Collums[index] = min+$(this).outerHeight()+margin;

max = Array.max(Collums);
$("#wrapper").height(" " + max + "px")
});

In de css hebben de artikelen position:absolute; en de wrapper heeft position:relative;. Hierdoor kan de positie van de artikelen binnen de wrapper worden berekent.leftPos word gebruikt voor de afstand van de linkerkant en min voor de afstand die het artikelen heeft van de bovenkant. leftPos word berekent door de breedte van een kolom te vermenigvuldigen met de index van de kolom waar het artikel zich in bevind.

;

Met deze "for loop" functie word de uitgerekend waar de artikelen komen te staan binnen de wrapper. . min is de laagst value in de array Collums, dus de hoogte van de kleinse kolom. index is de index value van min.

De tekst van hierboven zal nog in het engels vertaald worden.