Cara Merapihkan Tampilan Grid dengan Masonry
JejakSeru.com - Kali ini saya akan membahas Bagaimana Cara Merapihkan Tampilan Grid dengan Masonry. Jika kamu sering membuka pinterest, tentunya kamu sudah tidak asing melihat tampilan grid yang rapih walaupun setiap post berbeda tingginya. Jika blog kamu menggunakan tampilan grid, ada baiknya jika kamu memanfaatkan Masonry Grid Layout.
Masonry Library dikembangkan oleh David DeSandro. jQuery Masonry mengatur tata letak grid yang memiliki tinggi berbeda dengan mengatur elemen vertikal untuk mengisi ruang kosong vertikal di antara grid yang memiliki tinggi yang tidak sama.
Jika ada grid yang tidak memiliki tinggi yang sama, maka pada baris selanjutnya akan terdapat ruang kosong. Kode Masonry akan membuat grid di bawah yang kosong menjadi naik untuk mengisi ruang yang kosong.
Untuk menerapkannya pada tampilan grid blog kamu yang tidak memiliki tinggi sama, silahkan kamu coba simpan kode di bawah ini di atas kode
</body>
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var elem = document.querySelector('.main');
var msnry = new Masonry( elem, {
// options
itemSelector: '.post'
});
//]]>
</script>
Jika kamu telah memasang kode di atas, maka tampilan grid blog kamu akan berubah menjadi lebih rapih. Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.