Jika kita ingin mendapatkan efek tata letak aliran air terjun dan menampilkannya secara berurutan dari kiri ke kanan, metode tata letak CSS tidak dapat memenuhi kebutuhan kita untuk saat ini. Mengacu pada efek aliran air terjun Xiaohongshu. Xiaohongshu dibagi menjadi kolom kiri dan kanan, dan dapat ditampilkan menurut angka ganjil dan genap.
<view class=waterfall> <view class=waterfall-left> <view wx:if={{index%2 == 0}} class=item></view> </view> <view class=waterfall-right> <lihat wx:if={{index%2 == 1}} class=item></view> </view></view>Namun di sinilah masalahnya. Dengan ketidakpastian ketinggian setiap elemen, kemungkinan besar akan terjadi perbedaan ketinggian yang besar antara kolom kiri dan kanan.
Larutan:Untuk mengatasi masalah ini, kita perlu mencari tahu alasan mengapa ketinggian setiap elemen berbeda. Umumnya, tinggi gambar, atau mungkin beberapa area yang ditampilkan sesuai dengan kondisi gambarnya berbeda, dan ketinggian bagian lainnya tetap tidak berubah, yang membuat penghitungan kami menjadi sederhana.
Ide umumnya adalah mendapatkan tinggi kolom kiri dan kanan. Untuk menghitung tinggi kolom kiri dan kanan, masukkan kode selisih derajat, dan pindahkan 1/2 threshold selisih antara kedua kolom, seperti yang ditunjukkan pada gambar. gambar:
Keadaan di atas adalah keadaan ideal, tetapi tidak mungkin kita memotong elemennya. Kita perlu mengetahui apakah ada elemen di sisi yang lebih tinggi yang cocok untuk dipindahkan. Jika minH elemen terkecil pada kolom dengan ketinggian tertinggi, kurang dari threshold selisihnya, maka kita dapat memindahkannya, anda dapat mengambil elemen minH pada sisi panjang yang paling dekat dengan setengah tinggi selisihnya (biasanya yang memiliki tinggi terkecil, anda juga dapat memindahkan yang memiliki tinggi yang terkecil). ketinggian terkecil dengan cerdik). Jika elemen dengan tinggi terkecil lebih besar dari selisihnya, maka tidak perlu dipindahkan.
Jadi cara memindahkannya, elemen tersebut diberi atribut position secara default, nilainya center. Jika elemen tersebut ingin dipindahkan ke kiri, maka elemen tersebut diberi atribut: position:left; atribut posisi, lalu menurut bilangan ganjil dan genap, sebagai berikut :
<view class=waterfall> <view class=waterfall-left> <view wx:if={{item.position=='left' || (index%2 == 0&&item.position=='center')}} kelas =item></view> </view> <view class=waterfall-right> <view wx:if={{item.position=='right' || (index%2 == 1&&item.position=='center ')}} kelas=item></view> </view></view>Pada titik ini, masalah perbedaan ketinggian yang besar dapat diatasi.
Bagaimana cara menghitung tinggi dua kolom?Poin kuncinya adalah mendapatkan lebar dan tinggi gambar, sehingga kita dapat mengetahui tinggi kedua kolom. Ada dua situasi di sini:
1. Antarmuka mengembalikan lebar dan tinggi gambar
Antarmuka mengembalikan lebar dan tinggi gambar, jadi jika kita mengakumulasi tinggi gambar secara langsung, kita dapat membandingkan tinggi kedua kolom dan mendapatkan perbedaan tinggi.
Jika minH di sisi yang lebih tinggi lebih kecil dari selisih threshold antara tinggi kedua kolom, yaitu minH < threshold , maka minH perlu dipindahkan.
Dengan cara ini, saat mendapatkan data, kita dapat mengetahui apakah suatu elemen perlu dipindahkan. Setelah data diproses, data segera dirender ke lapisan tampilan.
Cara ini tentu saja paling bebas rasa khawatir, tetapi antarmuka mungkin tidak mengembalikan lebar dan tinggi gambar, jadi cara kedua harus digunakan.
2. Antarmuka tidak mengembalikan lebar dan tinggi gambar. Lebar dan tinggi gambar diperoleh dalam acara pemuatan gambar.
Dengarkan peristiwa pemuatan gambar dan dapatkan lebar dan tinggi gambar. Setelah gambar terakhir dimuat, gunakanboundingClientRect untuk mengukur tinggi dua kolom dan mendapatkan perbedaan tinggi.
Dalam metode ini, Anda harus mengukur apakah suatu elemen perlu dipindahkan setelah gambar dimuat.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.