nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


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

15 Android-apps voor IELTS, TOEFL & GRE-voorbereiding

15 Android-apps voor IELTS, TOEFL & GRE-voorbereiding

Er zijn verschillende examens en uitdagingen die ieder van ons tegenkomt in het leven . Op een bepaald moment, om welke reden dan ook, is die uitdaging misschien gewoon de IELTS (International English Language Testing Service), de TOEFL (Test of English as a Foreign Language) of de GRE (Graduate Record Examination)

(Technische en ontwerptips)

Vaststelling van Git Clone "Early EOFs" Fatale fout

Vaststelling van Git Clone "Early EOFs" Fatale fout

De opdracht "git clone" - zoals de naam doet vermoeden - stelt u in staat om een ​​volledige repository te dupliceren van op afstand naar lokaal, of omgekeerd. Hoewel het een vrij eenvoudig en rechttoe rechtaan git-commando is, kunnen zich soms nog problemen voordoen.Eerder deze week werd ik getroffen door een fout tijdens het uitvoeren van git clone, en de fout ziet er als volgt uit: error: pack-objects overleden aan signaal 9.20

(Technische en ontwerptips)