Wasserfallfluss im Miniprogramm

Wasserfallfluss ist ein sehr verbreitetes Webseitenlayout, das meiner Meinung nach eine sehr beliebte Layoutform ist Als nächstes werfen wir einen Blick auf die spezifische Implementierungsmethode (die in den Methoden verwendeten Beispiele sind alle zweispaltige Layouts).

Ein Wasserfallfluss gleicher Höhe

Ein Wasserfallfluss gleicher Höhe bedeutet, wie der Name schon sagt, dass die Höhen der einzelnen Kästen im Wasserfallfluss alle gleich sind. Diese Form des Wasserfalls flow ist relativ einfach zu implementieren, da die Berechnung der Boxhöhe nicht erforderlich ist. Beispiel:

<view>
  <view></view>
</view>

Page({
  data: {
    list: []
  },
  onLoad () {
    let images = []
    for (let i = 0; i <pre class="brush:php;toolbar:false">.fall {
  display: flex;
  flex-wrap: wrap;
  background-color: #f7f7f7;
}
.fall-item {
  width: 330rpx;
  height: 330rpx;
  margin-top: 30rpx;
  margin-left: 30rpx;
  background-color: aquamarine;
}

Der Boxinhalt im Beispiel verwendet keine Bilder, sondern stattdessen Farbblöcke. Die Implementierung des Wasserfallflusses gleicher Höhe kann direkt durch die Flex-Layout-Implementierung erfolgen, wie im Beispiel gezeigt. Sie können das Flex-Layout direkt verwenden, Zeilenumbrüche zulassen und die Breite und Höhe jedes Felds im Wasserfallfluss festlegen, was Sie problemlos implementieren können Ein Wasserfall-Flow-Layout mit zwei Säulen

Wasserfall-Flow mit ungleicher Höhe

Wasserfall-Flow mit ungleicher Höhe ist die gebräuchlichste Form, da die Höhe jedes Kastens berechnet wird Ist unterschiedlich, muss die Spaltenhöhe jeder Spalte aufgezeichnet werden. Vergleichen Sie, fügen Sie das nächste Feld in eine Spalte mit geringer Höhe ein und werfen Sie dann einen Blick auf die Implementierung des Wasserfallflusses mit ungleicher Höhe

Bekannt Boxhöhe

Im Allgemeinen wird im Wasserfallfluss Folgendes angezeigt: Es handelt sich um ein Bild. In diesem Fall gibt der Server die Breite und Höhe des anzuzeigenden Bildes an das Frontend zurück. Dies ist relativ einfach, da der Server die Breite und Höhe des Bildes zurückgibt und das Frontend nur die Spaltenhöhe berechnen muss. Fügen Sie einfach das nächste Bild in die kürzere Spalte ein. Zum Beispiel:

<view>
  <view>
    <view></view>
  </view>
</view>

.fall {
  display: flex;
  background-color: #f7f7f7;
}

.fall-column {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
}

.fall-column-item {
  width: 330rpx;
  margin-top: 30rpx;
  background-color: aquamarine;
}

Im obigen Beispiel werden der Einfachheit halber auch die Breite und Höhe von 10 Bildern in js simuliert. Wählen Sie jeweils 10 Bilder aus und definieren Sie die Höhe jeder Spalte. Fügen Sie das Bild in die kürzere Spalte ein und verwenden Sie dann das Höhenarray, um die Höhe des Bildes aufzuzeichnen und zu akkumulieren. Es ist auch sehr einfach,

Unbekannte Boxhöhe

Was sollen wir tun? wenn die Kastenhöhe unbekannt ist?

wx.getImageInfo

Die erste Möglichkeit besteht darin, die Informationen zur Bildbreite und -höhe über wx.getImageInfo abzurufen. Beispiel:

Page({
  data: {
    images: [{
      width: 360,
      height: 540
    }, {
      width: 480,
      height: 540
    }, {
      width: 540,
      height: 720
    }, {
      width: 720,
      height: 960
    }, {
      width: 540,
      height: 960
    }, {
      width: 360,
      height: 720
    }, {
      width: 360,
      height: 960
    }, {
      width: 540,
      height: 540
    }, {
      width: 540,
      height: 1440
    }, {
      width: 960,
      height: 1440
    }],
    heightArr: [],
    list: [],
    col: 2
  },
  onLoad () {
    this.initData(2)
  },
  initData (col) {
    let images = []
    let scale = 2
    // 模拟图片宽高
    for (let i = 0; i <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><view>
  <view>
    <view>
      <image></image>
    </view>
  </view>
</view>

Nach dem Login kopieren

Nach dem Login kopieren