Melaksanakan grid CSS seperti Pinterest bagi imej dinamik dalam React

Question

Jadi saya cuba menggunakan Grid CSS untuk membuat galeri imej seperti Pinterest. Jadi gambar ketinggian yang berbeza boleh bersebelahan antara satu sama lain, dan setiap gambar boleh mengambil ruang kosong. Tetapi semua contoh yang saya lihat menambah kelas yang berbeza pada setiap imej berdasarkan ketinggian yang mereka mahu, sedangkan saya mahu menambah imej secara dinamik daripada pangkalan data.

Saya mencuba ini:

<div className=‘gallery’>
<img className=‘image’> </img>
<img className=‘image’> </img>
<img className=‘image’> </img>
<img className=‘image’> </img>
</div>

Fail CSS saya:

.gallery{
max-width: 80vh;
display: grid;
grid-template-columns:repeat(3,1fr);
}

.image{
max-width: 200px;
height: 100%;
object-fit: cover;
}

Tetapi jadi gambar-gambar kecil berada pada baris yang sama dan gambar-gambar besar berada pada baris yang lain, dan saya mahu ia menjadi rawak.

Adakah terdapat cara untuk mencapai ini tanpa menambah kelas yang berbeza untuk setiap imej?

Answer 1

Pinterst menggunakan penjajaran menegak. Jadi, jika anda ingin menduplikasinya, anda harus membuat kotak menegak yang bersebelahan dan mempunyai lebar tetap. dan paparkan seberapa banyak baris yang sesuai dengan saiz skrin. (Jika anda mengubah saiz tetingkap Pinterest, keseluruhan halaman akan dijana semula, tetapi itu di luar skop soalan anda, saya rasa) Jadi saya mengesyorkan menggunakan div atau jadual dengan hanya satu baris dan satu lajur panjang.

<table>
  <tr>
    <td>图片</td>
    <td>图片</td>
    <td>图片</td>
  </tr>
</table>

Sudah tentu ia dinamik. (Saya mencipta baris panjang dengan 3 lajur untuk skrin yang lebih kecil) Dari sini, anda boleh menambah imej pada setiap lajur, menetapkan lebar tr kepada 200px dan lebar imej kepada 100%.