Använda jQuery Masonry för Pinterest-Like Posting

Med införandet av jQuery Masonry i WordPress 3.5-kärnbiblioteket har det aldrig varit lättare att byta upp en malls layout för nyligen publicerat.

Att tjäna upp ditt innehåll i en masonry-layout kan göra bloggdelen på din webbplats mer visuellt intressant för dina läsare. Med jQuery Masonry spelar det ingen roll hur länge ditt utdrag är (med motiveringen självklart), det kommer att anpassas för att fylla varje bit av utrymme. Denna handledning kommer att undersöka tanken bakom att använda det nyligen inkommande jQuery Masonry-biblioteket med WordPres 3.5.

Vad är en Masonry Layout?

Om du har hört talas om en mur med murar (tänk på en tegelvägg), har du en ganska bra mental bild av vad en masonrylayout på din webbplats kan se ut. Om du fortfarande är förvirrad, besök Pinterest och kolla hur de har lagt ut varje "pin" på deras hemsida. Allt är ordnat vertikalt och fyller allt tillgängligt utrymme. Det är viktigt att notera termen "vertikal" i den sista meningen. Du kan uppnå samma typ av murverkseffekt med hjälp av CSS-flottor, men du kanske stöter på problem med avstånd. Detta händer eftersom CSS-flottor, till skillnad från jQuery Masonry, kommer att ordna element horisontellt först, sedan vertikalt. Detta kan göra för mycket inkonsekventa och ibland oönskade luckor i rymden i din layout. Använda jQuery Masonry kan hjälpa till att lösa detta problem.

CSS Float Exempel

Lägg märke till hur det finns luckor mellan inlägg av varierande höjd när du använder CSS-flottor.

jQuery Masonry Exempel

Med jQuery Masonry passar varje inlägg snyggt på plats och lämnar inga besvärliga luckor.

Nu när vi vet vad en Masonry layout är, låt oss börja med att skapa en enkel, jQuery Masonry layout för våra senaste inlägg.

Steg 1 Användning `wp_enqueue_script` att ladda biblioteket

Innan vi kan börja bygga vår vägg måste vi ladda det lämpliga skriptet. Du måste lägga till följande kod i din functions.php fil.

 funktion mason_script () wp_enqueue_script ('jquery-masonry');  add_action ('wp_enqueue_scripts', 'mason_script');

Steg 2 Ställa in rutnätet

För min grundläggande murverkstruktur ska jag implementera följande HTML i min loop (eller anpassad mall - var du än tänker bygga din vägg). Först ska jag ställa in behållaren till murmuren och sedan ställa in behållaren för varje inlägg i väggen.

Ställa in din CSS

Du måste definiera behållarens bredd och inläggets bredd för att uppnå den faktiska murverkseffekten. För min demo har jag satt min behållare till 960 pixlar bred och jag vill ha 4 kolumner av inlägg. Så, jag behöver göra lite enkel matte för att hitta vilken storlek bredd varje inlägg på min vägg borde vara.

Tegelbredd = 960px / 4 inlägg = 240 pixlar vardera.

Med det numret i åtanke kan jag ställa in min layout i mitt stylesheet:

 #container width: 960px; // bredden av hela behållaren för väggen. brick width: 220px; // Bredden på varje tegel mindre vadderingen mellan polstring: 0px 10px 15px 10px;

Steg 3 Ställ in funktionen

Därefter måste vi installera murverkfunktionen så att våra div-containrar alla meshas ihop i väggen. Använd följande kod för att göra detta:

 jQuery (dokument) .ready (funktion ($) $ ('#container') .masonry (columnWidth: 220););

Slutsats

Masonry kommer med många inbyggda alternativ som gör det mycket tilltalande att använda med WordPress. Till exempel kan du använda animeringsalternativet för att "animera" dina postarrangemang, lägga till ytterligare objekt på väggen (bra för portföljlayouter) eller införliva det med Paul Irlands Infinte Scroll. Oavsett hur du planerar att använda jQuery Masonry-skriptet, är det ett välkommet tillägg till WordPress 3.5.

Sidanotering: Att uppnå samma effekt i CSS3 är möjlig. Du behöver dock använda den nya "kolumner" -funktionen, som ännu inte stöds i varje webbläsare.

Koda