Het gebruik van jQuery metselwerk voor Pinterest-like posting

Met de opname van jQuery metselwerk in de kernbibliotheek van WordPress 3.5 was het nog nooit zo eenvoudig om de lay-out van een sjabloon voor recente posting te wijzigen.

Als u inhoud in een metselwerklay-out serveert, kan het bloggedeelte van uw website visueel interessanter zijn voor uw lezers. Met jQuery Metselwerk maakt het niet uit hoe lang je bericht is (uiteraard binnen de reden), het zal zich aanpassen om elk stukje ruimte te vullen. Deze tutorial gaat het idee achterhalen met behulp van de nieuw opgenomen jQuery Masonry-bibliotheek met WordPres 3.5.

Wat is een metselwerklayout?

Als je hebt gehoord van een "metselwerk" -muur (denk aan een bakstenen muur), dan heb je een redelijk goed mentaal beeld van hoe een metselwerklay-out op je website er uit zou kunnen zien. Als je nog steeds in de war bent, bezoek dan Pinterest en bekijk hoe ze elke "punaise" op hun website hebben neergezet. Alles is verticaal gerangschikt, het opvullen van alle beschikbare ruimte. Het is belangrijk om de term 'verticaal' in die laatste zin te noteren. U kunt hetzelfde type metseleffect bereiken met behulp van CSS-drijvers, maar mogelijk loopt u problemen met de afstand. Dit gebeurt omdat, in tegenstelling tot jQuery metselwerk, CSS-drijvers elementen eerst horizontaal en vervolgens verticaal rangschikken. Dit kan zorgen voor zeer inconsistente en soms ongewenste gaten in de lay-out. Het gebruik van jQuery metselwerk kan dit probleem helpen oplossen.

CSS Float-voorbeeld

Merk op hoe er hiaten zijn tussen berichten van verschillende hoogtes als je CSS-drijvers gebruikt.

jQuery metselwerk voorbeeld

Met jQuery metselwerk past elke post mooi op zijn plaats, waardoor er geen ongemakkelijke gaten worden achtergelaten.

Nu we weten wat een lay-out van de metamorfose is, laten we beginnen met het maken van een eenvoudige jQuery-metselwerklay-out voor onze recente berichten.

Stap 1 Gebruiken `wp_enqueue_script` om de bibliotheek te laden

Voordat we onze muur kunnen gaan bouwen, moeten we het juiste script laden. U moet de volgende code toevoegen aan uw functions.php het dossier.

 functie mason_script () wp_enqueue_script ('jQuery-metselwerk');  add_action ('wp_enqueue_scripts', 'mason_script');

Stap 2 Het raster instellen

Voor mijn basismetselstructuur ga ik de volgende HTML in mijn lus implementeren (of aangepaste sjabloon - waar je ook van plan bent om je muur te bouwen). Eerst ga ik de container plaatsen voor de muur metselwerk en vervolgens de container instellen voor elke paal binnen de muur.

Uw CSS instellen

U moet de breedte en breedte van de container definiëren om het werkelijke metseleffect te bereiken. Voor mijn demo heb ik mijn container ingesteld op 960 pixels breed en ik wil 4 kolommen met berichten hebben. Dus, ik moet wat eenvoudige wiskunde doen om te vinden in welke maatbreedte elk bericht op mijn muur zou moeten zijn.

Baksteenbreedte = 960 px / 4 berichten = 240 pixels elk.

Met dat aantal in gedachten kan ik mijn lay-out in mijn stylesheet instellen:

 #container width: 960px; // breedte van de hele container voor de muur .brick width: 220px; // breedte van elke steen minus de opvulling tussen de opvulling: 0px 10px 15px 10px;

Stap 3 Stel de functie in

Vervolgens moeten we de metselfunctie instellen, zodat onze div-containers allemaal in elkaar grijpen in de muur. Gebruik de volgende code om dit te doen:

 jQuery (document) .ready (function ($) $ ('#container') .masonry (columnWidth: 220););

Conclusie

Metselwerk komt met veel ingebouwde opties die het erg aantrekkelijk maken om te gebruiken met WordPress. U kunt bijvoorbeeld de animatieoptie toepassen om uw postarrangementen te "animeren", extra items aan de muur toevoegen (ideaal voor portfoliodelay-outs) of deze toevoegen aan de Infinte Scroll van Paul Irish. Ongeacht hoe je het jQuery Masonry-script gaat gebruiken, het is een welkome toevoeging aan WordPress 3.5.

Kanttekening: Hetzelfde effect bereiken in CSS3 is mogelijk. U moet echter de nieuwe "kolommen" -functionaliteit gebruiken, die nog niet in elke browser wordt ondersteund.

Code