Membina Tataletak Grid Boleh Diatur Responsif Dengan Skrip Ini

Grid peribadi adalah beberapa ciri yang paling sukar untuk dicipta dari awal. Anda boleh menemui banyak plugin grid batu tetapi mereka masing-masing mempunyai batasan & keperluan mereka sendiri.

The Skrip Muuri adalah alternatif yang kuat untuk sesiapa sahaja yang memerlukan elemen grid disusun & responsif dengan sokongan sentuhan.

Ia dibina Velocity.js untuk animasi, bersama dengan Perpustakaan Hammer.js untuk mengendalikan sentuhan mudah alih. Muuri tidak memerlukan jQuery, jadi ia adalah salah satu daripada beberapa plugin JavaScript vanili untuk antara muka grid.

Pada halaman utama projek, anda akan dapati demo grid indah dengan semua ciri-ciri. Kesan animasi, sokongan drag & drop, dan elemen grid yang berbeza dari pelbagai saiz. Demo ini mempamerkan betapa banyak kawalan yang ada pada grid Muuri.

Awak boleh pilih unsur yang hendak dipaparkan, berdasarkan kelas (iaitu penapisan), bersama dengan bagaimana anda ingin mengisi ruang kosong.

Grid batu sering meninggalkan tempat kosong kerana unsur grid tidak selalunya sesuai dengan sempurna. Ini agak tipikal untuk laman web yang lebih besar seperti Pinterest. Walaupun, anda boleh tambah item grid seret untuk hampir semua antara muka pengguna yang terkawal.

Fikirkan tentang profil sosial dengan susun atur widget dan bagaimana ia berfungsi. Atau, fikirkan senarai tugas tersuai yang dijalankan sebagai aplikasi web progresif pada JavaScript. Memang ada demo hebat ini di laman Muuri yang memperlihatkan senarai tugasan sampel dan bagaimana ia boleh berfungsi sebagai PWA di telefon bimbit.

Untuk bermula, anda hanya termasuk semua ketergantungan JavaScript, bersama skrip Muuri. Anda boleh tarik mereka melalui npm atau ambil salinan dari repo GitHub.

Kemudian kamu mewujudkan elemen grid bekas dan sasarkan bahawa dengan contoh baru Muuri () kaedah. Semuanya mudah dan mudah digunakan dengan menyalin coretan kod dari repo GitHub.

Dengan sokongan penuh untuk semua pelayar moden (IE9 +) dan antara muka yang membolehkan sentuhan, plugin ini adalah salah satu yang terbaik untuk menyeret dan menggugurkan ciri grid.

Ketahui lebih lanjut dengan membaca melalui laman utama Muuri dan tinkering dengan demo langsung. Ini adalah sistem yang hebat untuk grid dinamik dan ia masih dalam pembangunan aktif, jadi anda boleh mempercayai plugin ini akan berada di sekitar untuk jangka masa panjang.