Detaillierte Erläuterung des Wasserfall-Flusslayouts von jQuery Masonry

Dieser Artikel stellt hauptsächlich die Verwendung des jQuery Masonry-Wasserfall-Layout-Artefakts vor. Ich hoffe, dass es jedem helfen kann.

Als ich kürzlich eine Website erstellte, umfasste ein Teil davon viele Bildlayouts, und ich wollte das beliebtere Water Flow-Layout verwenden.

Ich habe es am Anfang selbst geschrieben, was wirklich mühsam war. Obwohl es den Layouteffekt erzielen kann, sind einige Bilder relativ klein aber sie werden zwangsweise vergrößert. Es klingt sehr widersprüchlich. Später habe ich im Internet recherchiert und herausgefunden, dass es ein sehr gutes Tool für die Wasserströmungsplanung gibt. Lernen wir dieses Artefakt kennen~
Artefaktname: JQuery Masonry, Website: http://masonry.desandro.com/index.html

Die Verwendungsmethode ist ganz einfach:

1. Markieren Sie den Container und das Element, das ausgelegt werden muss

Mauerwerk benötigt einen Container, um Unterelemente mit ähnlicher Struktur zu laden

<p id="container"> 
 <p class="item">...</p> 
 <p class="item">...</p> 
 <p class="item">...</p> 
 ... 
</p>

Fügen Sie dann Jquery- und Masonry-Skriptverweise zur Seite hinzu, hierfür ist JQuery-Version 1.6+ erforderlich

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="/path/to/jquery.masonry.min.js"></script>

2, CSS schreiben

Die Größe aller Elemente, die angeordnet werden müssen, wird durch CSS bestimmt und alle Elemente müssen schwebend sein
z. B.:

.item { 
 width: 220px; 
 margin: 10px; 
 float: left; 
}

3. Schreiben Sie ein Skript

Schreiben Sie ein Skript, an das die Initialisierungslayoutparameter übergeben werden Lassen Sie das Containerlayout automatisch erfolgen.
Es wird dringend empfohlen, die Parameter itemSelector und ColumnWidth zu konfigurieren. Weitere Parameterkonfigurationen finden Sie auf der offiziellen Website.

$(function(){ 
 $('#container').masonry({ 
  // options 
  itemSelector : '.item', 
  columnWidth : 240 
 }); 
});

OK, das ist das Ende. So einfach~

Sehen wir uns den Effekt an

Verwandte Empfehlungen:

jQuery.lazyload+ masonry verbesserter Bild-Wasserfall-Flow-Code_Bild-Spezialeffekte

Detaillierte Erläuterung der Verwendung von jQuery Masonry Waterfall-Flow-Plug-in_jquery

JS-Beispiel für die Implementierung des Wasserfall-Flows Layout-Analyse

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Wasserfall-Flusslayouts von jQuery Masonry. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!