Implementieren Sie das Wasserfall-Flow-Layout und das unbegrenzte Laden im WeChat-Miniprogramm

Wasserfall-Flow-Layout ist eine beliebte Seitenlayout-Methode, die typischste ist Pinterest.com Die Höhe jeder Karte ist unterschiedlich, was zu einer ungleichmäßigen Ästhetik führt.

In HTML5 finden wir viele Wasserfall-Flow-Layout-Plug-Ins, die auf jQuery und dergleichen basieren, um ein solches Layout-Formular einfach zu erstellen. Im WeChat Mini-Programm können wir diesen Effekt ebenfalls erzielen, aber aufgrund einiger Merkmale des Mini-Programm-Frameworks gibt es immer noch einige Unterschiede in den Umsetzungsideen.

Heute schauen wir uns an, wie man dieses Wasserfall-Flow-Layout im Miniprogramm umsetzt:

Miniprogramm-Wasserfall-Flusslayout

Was wir implementieren möchten, ist ein festes 2-Spalten-Layout und dann das Bild dynamisch laden Daten in diese beiden Spalten (das geladene Bild wird je nach tatsächlicher Größe des Bildes in der linken oder rechten Spalte platziert).

/* Stil eines einzelnen Bildcontainers*/.img_item { width: 48%; margin: 1%; display: inline-block;
}

Wir wissen, dass wir in HTML normalerweise new Image() verwenden, wenn wir Bilder dynamisch laden möchten um sie zu erstellen Ein Bildobjekt und verwenden Sie es dann, um das Bild, auf das die URL zeigt, dynamisch zu laden und die tatsächliche Größe des Bildes und andere Informationen zu erhalten. Im Miniprogramm-Framework ist kein entsprechendes JS-Objekt für das Laden von Bildern vorhanden. Tatsächlich können wir die Komponente in wxml verwenden, um eine solche Funktion auszuführen. Obwohl sie etwas kompliziert ist, kann sie dennoch unsere funktionalen Anforderungen erfüllen.