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

10 Cyber ​​Monday Deals voor website-ontwerpers

Cyber ​​Monday is er weer. Het is meestal een goed moment om superdeals te krijgen voor producten en diensten, en dit jaar is geen uitzondering. Als u een webontwerper bent die op zoek is naar premium webproducten of -services, zijn er aanbiedingen die de Cyber ​​Monday-winkelervaring dit jaar tot uw allerbeste kunnen maken.Ga naar

(Technische en ontwerptips)

Nieuwe bron voor webontwikkelaars - juli 2018

In dit deel van de nieuwe bronnen hebben we een verscheidenheid aan bronnen in de lijst. Afgezien van een aantal op code gebaseerde hulpmiddelen zoals nieuwe JavaScript-bibliotheken en -kaders, hebben we ook een aantal handige GUI-toepassingen toegevoegd waarvan ik zeker weet dat zowel ontwikkelaars als ontwerpers dit zullen waarderen

(Technische en ontwerptips)