10 Grid jQuery Paling Menarik
jQuery biasanya merupakan pilihan pertama bagi kebanyakan orang yang ingin mempelajari pemrograman JavaScript karena menyediakan metode yang mudah untuk memilih elemen HTML dan memanipulasi DOM. jQuery sangat populer, menurut statistik terbaru dari W3Techs, “jQuery digunakan oleh 95,4% dari semua situs web yang pustaka JavaScriptnya kita ketahui.”
jQuery juga digunakan oleh banyak pustaka JavaScript sebagai ketergantungan, dan versi alpha dari rilis utama baru, jQuery 3.0 sudah ada di luar sana. Jika proyek Anda menggunakan jQuery dengan cara apa pun dan Anda menginginkannya tata letak yang dinamis dan fleksibel untuk desain Anda, ada baiknya mempertimbangkan untuk menyertakan plugin jQuery grid ke frontend stack Anda.
Bagaimana Cara Kerja Grid jQuery?
Grid jQuery memungkinkan Anda buat tata letak seperti Pinterest untuk situs Anda. Mereka bekerja seperti matriks virtual, mereka mengikuti “kotak di dalam kotak” prinsip. kisi jQuery menghitung secara dinamis pengaturan barang apa yang terbaik dan mengisi halaman dengannya dengan cara yang meninggalkan ruang paling sedikit kosong, sesuatu seperti apa yang Anda lihat dalam kotak ini di sini.
Keuntungan utama dari jQuery grids dibandingkan dengan CSS grids adalah mereka bekerja dengan gambar atau elemen media lain yang memiliki lebar dan ketinggian berbeda. Efek JavaScript keren juga merupakan alasan besar untuk menggunakan kisi jQuery untuk membuat tata letak modern.
Dalam posting ini Anda dapat membaca tentang 10 grid jQuery paling menarik yang saat ini ada di pasaran - tentu saja, sama seperti jQuery, semuanya open-source dan gratis.
1. jQuery Nested
jQuery Nested menyediakan perangkat praktis untuk Anda tata letak kotak multi-kolom yang responsif dan bekerja di semua jenis perangkat. Plugin jQuery ini mengiklankan dirinya sendiri sebagai benar-benar bebas celah. Pada awalnya slogan ini mungkin terdengar seperti trik pemasaran yang murah tetapi plugin ini benar-benar mencapai gap-freedom dengan sangat baik, seperti yang dijanjikan pembuatnya..
jQuery Nested mengikuti skrip unik di mengisi matriks grid. Pertama-tama ia menciptakan grid multi-kolom, kemudian memindai matriks untuk mencari celah dan mengisinya dengan menyusun ulang elemen yang berbeda. Akhirnya - dan itu adalah langkah yang membuat grid ini menjadi gapless - ini mengubah ukuran elemen apa pun di baris bawah yang tidak sesuai dengan gap..
2. Freewall
Freewall memungkinkan Anda membuat tata letak yang Anda inginkan, apakah itu kisi gambar, kisi bersarang, pasangan bata atau kisi gaya metro. Ini memiliki banyak opsi yang dapat Anda tetapkan sebagai variabel JavaScript seperti gutterX, gutterY, animate, cellW, cellH, dll. Ini memiliki acara khusus seperti onGapFound dan onResize, dan metode kustom juga.
Anda dapat menemukan contoh kode yang bagus di situs web mereka. Para dev juga peduli tentang jiwa-jiwa malang yang masih harus mendesain untuk browser lama, jadi Freewall mendukung Internet Explorer 8, dan itu juga memiliki solusi untuk JavaScript yang dinonaktifkan, saat digunakan Animasi CSS 3 sebagai strategi fallback JS. Lihat artikel kami di Freewall di sini.
3. Masonry
Nama Masonry tua yang baik harus familier di telinga setiap desainer yang berpengalaman. Jika Anda belum pernah mendengarnya, Masonry adalah seorang pustaka tata letak cascading grid yang berfungsi dengan jQuery dan vanilla JavaScript.
Plugin praktis ini adalah basis dari banyak tema WordPress populer. Anda bahkan tidak perlu mengunggahnya ke server karena Anda dapat dengan mudah menautkan perpustakaan langsung dari CDN.
>
