Creëer eenvoudig Dynamic Grid Layout met FreeWall

Als u bekend bent met Windows 8 of Pinterest, kent u de dynamische rasterlay-out. Een dynamisch raster is een lay-out waarmee u onderliggende elementen naar wens kunt herschikken en verplaatsen, of wanneer de afmetingen van uw browser worden gewijzigd. Een populaire jQuery-invoegtoepassing voor het maken van deze lay-out is jQuery metamont maar als u meer opties en zelfs animatie wilt, bekijk dan FreeWall.

FreeWall is een gratis jQuery-invoegtoepassing van Minh Nguyen die u kunt gebruiken om vele opmaaktypen voor rasters te maken : flexibele lay-out, lay-out in de metrostijl, geneste rasters, afbeeldingslay-out en vloeiend raster. Het heeft ook ondersteuning voor responsief ontwerp, zodat u uw site kunt weergeven op desktop, mobiel of tablet.

Bovendien heeft het ook zeer mooie CSS-animaties en callback-evenementen zoals onGapFound, onComplete, onResize en onSetBlock.

Ermee beginnen

Om met FreeWall aan de slag te gaan, moet u het jQuery- of Zepto-framework opnemen. In deze basisgids gebruiken we jQuery als voorbeeld om een ​​normale demo van de rasterlay-out te maken.

Laten we nu eerst het jQuery-framework en de FreeWall-plug-in opnemen met de volgende code.

We zullen enkele stenen voor de container van de lay-out weergeven.

Normaal raster 

En definieer onze steenformaten met de width en height van 320px met behulp van de stijlregel hieronder:

 .size320 {width: 320px; hoogte: 320 px; } 

Nu, om wat JavaScript-code toe te voegen.

Zorg dat het werkt

Om willekeurige stenen aan de stenen te geven, definiëren we enkele Math.random() en passen ze toe op de stenen met de methode Math.random(), zoals zo.

 var color = ["rgb (142, 68, 173)", "rgb (243, 156, 18)", "rgb (211, 84, 0)", "rgb (0, 106, 63)", "rgb (41, 128, 185) ", " rgb (192, 57, 43) ", " rgb (135, 0, 0) ", " rgb (39, 174, 96) "]; $ (". free-wall .size320"). each (function () {var backgroundColor = color [color.length * Math.random () << 0]; var bricks = $ (this) .find (". brick ");! bricks.length && (bricks = $ (this)); bricks.css ({backgroundColor: backgroundColor});}); 

Ten slotte gaan we functies toevoegen om de layout goed weer te geven. Dit is wat FreeWall geweldig maakt. Het heeft enkele opties en methoden om het gedrag van het raster te regelen. De opties aangeboden door FreeWall zijn:

 animeren: waar, // Waar om blok met animatie laten bewegen. block.flex: true, // Van pas gemaakt blok kan het formaat van een beetje aanpassen. cel.breedte: aantal, celhoogte: aantal, vulGap: waar, // Waar maakt de opmaak zonder tussenruimte. dakgoot: gemengd, // De afstand tussen de blokken. selector: string, // Haal alle blokken op om de lay-out te maken. 

Laten we de plug-in bellen met behulp van de volgende code.

 $ (function () {$ (". free-wall"). each (function () {var wall = nieuwe freewall (this); wall.reset ({selector: '.size320', cellW: function (container) { var cellWidth = 320; if (container.hasClass ('size320')) {cellWidth = container.width () / 2;} return cellWidth;}, celH: function (container) {var cellHeight = 320; if (container.hasClass ('size320')) {cellHeight = container.height () / 2;} return cellHeight;}, fixSize: 0, gutterY: 20, gutterX: 20, onResize: function () {wall.fitWidth ();}}) wall.fitWidth ();}); $ (window) .trigger ("resize");}); 

Zoals je kunt zien in de bovenstaande functiecode, gebruiken we een deel van de FreeWall-optie, -methode en -gebeurtenis. Zoals fixSize, gutterY, gutterX, onResize en fitWidth . Als u een andere optie, methode of gebeurtenis wilt gebruiken, kunt u de documentatie vinden op de officiële startpagina van FreeWall.

Nu kunt u de dynamische rasterlay-out in actie zien op de demopagina. Als u het formaat van uw browser wijzigt, worden de stenen automatisch herschikt en van grootte veranderd.

• Demo bekijken
• Download de bron

Maak draagbare apps (werkt zonder installatie) met behulp van Cameyo

Draagbare apps zijn de applicaties die rechtstreeks op een Windows-systeem worden uitgevoerd zonder installatie . Dit maakt het mogelijk om deze apps op een flashstation te dragen en ze te gebruiken op elk Windows-systeem, op kantoor, in uw schoollab of in een openbaar cybercafé. En als het gaat om draagbare apps, vind ik Cameyo de beste tool daarvoor.

(Technische en ontwerptips)

Zoek en installeer WordPress-plug-ins via Github

WordPress-plug-ins worden "officieel" gedistribueerd via de pluginrepository van WordPress. U kunt zoeken naar elke plug-in om extra functionaliteiten toe te voegen aan uw website of blog. Maar er zijn ook een aantal geweldige plug-ins die we buiten kunnen vinden en die niet worden gehost in de officiële repo .

(Technische en ontwerptips)