Halo semuanya! Hari ini saya ingin tahu tentang bagaimana tanpa plugin dan skrip untuk dilakukan blok batu bata.(masonry. dari bahasa Inggris - Bata bata), yaitu, blok ketinggian yang berbeda akan ditempatkan dengan indah satu sama lain tanpa indentasi kosong besar. Iya! Semua ini dapat dilakukan dengan sangat mudah dengan CSS.
CSS memiliki properti yang dapat Anda buat teks atau blok multikolong. Mereka menggunakannya.
Properti disebut kolom. Ini adalah properti universal yang memungkinkan Anda untuk segera mengatur lebar dan jumlah kolom. Lebih lanjut tentang itu Anda dapat membaca cSS bagus. direktori.
Jadi, semuanya sebenarnya sangat sederhana. Misalnya, kami memiliki 6 elemen ketinggian yang berbeda, tetapi lebar yang sama. Contoh cerah adalah bilah sisi (kolom lateral) di situs. Ada semua blok dengan lebar yang sama, tetapi ketinggian yang berbeda. Biasanya B. versi mobile. Situs SiteBar memiliki setelah konten utama, di bagian bawah situs, dan konten itu sendiri membuat seluruh lebar layar. Secara alami, situs ini juga tidak rasional dalam satu kolom, karena akan ada banyak ruang kosong di samping, terutama jika Anda melihat dari tablet.
Tetapi jika blok mengatur properti tampilan: blok inline, kemudian mereka secara otomatis, jika ada cukup lebar wadah, akan terletak di beberapa kolom. Namun, semuanya mungkin tidak terlihat sangat indah:
Setuju, indentasi ini antara blok tidak terlihat sama sekali. Oleh karena itu, sangat perlu diperbaiki! Untuk ini ke blok kontainer,di mana blok berada, Anda perlu menambahkan gaya yang diperlukan:
Moz-kolom: 300px otomatis; -Webkit-kolom: 300px otomatis; Kolom: 300px otomatis;
Untuk lintas-browser, gunakan properti untuk Firefox dan browser WebKit (Chrome, Safari, Android). Misalnya, kami ditempatkan dengan blok dengan daftar yang ditandai Kemudian gaya untuk contoh dalam gambar akan terlihat seperti ini:
UL (lebar: 1050px; -moz-kolom: 300px otomatis; -webkit-kolom: 300px otomatis; kolom: 300px otomatis;) li (display: blok inline; box-shadow: 0 8px # 555; NONE; ; Padding: 10px; lebar: 300px; margin-bottom: 30px; vertikal-align: TOP;)
Dalam hal ini, blok akan ditemukan di beberapa kolom. minimal Lebar 300px, dan jumlah kolom akan ditentukan secara otomatis oleh browser. Lebih mudah untuk menciptakan kemampuan beradaptasi. DI kasus ini Akan ada 3 kolom, dan begitulah tampilannya:
Lebar wadah (1050px) harus mengambil jika Anda ingin jarak antara blok vertikal bertepatan dengan jarak secara horizontal. Jika tidak, lebar antara speaker akan diinstal secara otomatis oleh browser. Memiliki properti celah kolom.yang menetapkan jarak antara kolom. Tetapi dalam hal ini itu tidak akan berfungsi seperti yang Anda inginkan.
Ada opsi lain: untuk blok yang Anda butuhkan untuk mengatur properti lebar: 100%. Juga, jika properti padding dipasang, seperti dalam kasus saya, Anda perlu mengatur properti box-sizing: border-box. Sekarang Anda dapat dengan aman menambahkan properti kolom-gap ke wadah untuk mengatur jarak antara kolom. Jadi itu akan berfungsi sesuai kebutuhan.
Setuju, itu terlihat jauh lebih baik! Anda juga dapat menempatkan blok "DIV" di dalam wadah div. Baik, jika Anda perlu mendistribusikan teks ke dalam beberapa kolom, cukup dalam tag "P" dengan, misalnya, kelas teks menambahkan teks yang diinginkan dan untuk kelas ini kami meresepkan properti kolom..
Itu saja! Jadi hanya tanpa skrip yang tidak perlu, Anda dapat memposisikan blok dalam bentuk bata atau teks dalam beberapa kolom. Tetapi perhatikan bahwa dalam hal ini hanya akan terlihat indah jika bloknya memiliki lebar yang sama. Dalam kasus lain, itu tetap hanya untuk menggunakan skrip batu yang baik. Script secara otomatis memposisikan setiap blok. Tapi itu topik lain ...
Itu saja! Jika beberapa pertanyaan atau komentar muncul, biarkan mereka di komentar. Semoga berhasil!
Di bagian blog. Foto ini tema WordPress. Ini akan menjadi contoh kami, tetapi Anda mungkin telah melihat penggunaan JQuery Masonry dan di situs WordPress lainnya.
Apa itu JQuery Mansory
Masonry dapat dianggap sebagai tambahan untuk CSS, yang dengannya Anda dapat memposisikan elemen secara horizontal, berubah menjadi posisi vertikal tergantung pada lebar monitor. Akibatnya, kesenjangan vertikal antara elemen-elemen dari ketinggian yang berbeda diminimalkan. Jika Anda ingin melakukannya juga cSS BANTUAN, Percayalah padaku kamu akan memiliki banyak sakit kepala.
Pada contoh ini, Anda dapat melihat prinsip kerja Masonry JQuery sebelum dan sesudah digunakan:
Bagaimana Anda melihat hasilnya pada wajah jika Anda menggunakan CSS float: kiri, maka ada interval kosong, Anda perlu menggunakan posisi CSS, yang cukup bermasalah, Anda bisa, tetapi mengapa, dalam hal ini akan membantu Masonry akan membantu.
Kami menggunakan JQuery Mansory di situs WordPress
Masonry dapat digunakan dalam dua kasus. Yang pertama adalah ketika semua blok Anda dengan informasi adalah lebar yang sama, dalam hal ini Anda perlu menggunakan skrip ini:
|
Jika Anda memiliki blok lebar berbeda, Anda perlu menggunakan kode berikut:
|
Dimana solumnwidth. Ini adalah lebar grid (dalam piksel). Masonry akan mengikuti dua aturan ini:
- Lebar keseluruhan unsur-unsur (dihitung sesuai dengan rumus ini) \u003d lebar CSS + padding-kanan + padding-kiri + border-lebar-lebar + lebar-kiri-lebar + margin-kiri + kiri
- Saat menggunakan kolomwidth, semua elemen harus diatur secara horizontal per lebar kolomwidth (misalnya, untuk kolomwidth: 200, item akan dimulai dengan 0 atau 200 atau 400 piksel dan sebagainya). Mungkin tidak sepenuhnya jelas, tetapi tidak ada yang sulit dalam hal ini, kita melihat gambarnya.
Elemen pertama dari total lebar 190px dan margin-kanan: 0. Dan elemen kedua memiliki margin-kiri: 0, secara teori, dua elemen ini harus saling menyentuh. Tetapi karena kolomwidth memiliki nilai 200px, maka elemen kedua mulai menampilkan jarak 200px.
Proses ini tidak akan terjadi jika kita tidak memiliki nilai kolomwidth dalam skrip dan semua elemen dimulai satu sama lain, jadi perlu memisahkannya dengan margin.
Jadi bertanya-tanya jQuery Masonry dan WordPress 3 ..
Sekarang saya menyandikan sedikit. Untuk memulainya, hubungkan perpustakaan jQuery dan Masonry yang diperlukan di file Header.php. Lewati kode ini di header.php (Anda dapat mengunduh Anda di situs off):
// hubungkan jquery.// hubungkan Masonry.
Pastikan wp_enqueue_script berdiri sebelum WP_HEAD. Script Masonry terletak di folder JS topik saya, Anda mungkin memiliki nama yang berbeda.
< div id = "content_masonry" > < div class = "masonry_box" > < ! -- post content -- > < / div > < div class = "masonry_box" > < ! -- post content -- > < / div > . . . < / div > < ! -- #content_masonry--> |
DIV ID \u003d "Content_masonry" akan menghubungi Script Masonry, dan Div Class \u003d "Masonry_Box" akan menampilkan posting kami menggunakan skrip. Sekarang CSS, Anda dapat melakukan konten_maasonry misalnya lebar 100%, maka Anda tidak perlu diperlakukan, tetapi jika Anda membuat lebar tetap dari konten_masonry, Anda perlu melakukan perhitungan yang diperlukan. Misalnya, Anda membuat 4 kolom dengan posting, masing-masing memiliki lebar + padding 190px dan margin-kanan: 10px, maka ukuran konten dari konten_maasonry wadah akan menjadi 200 x 4 \u003d 800px:
#Content_masonry (lebar: 800px;) #content_masonry .masonry_box (lebar: 170px; padding: 10px; margin-kanan: 10px;)
#Content_masonry ( lebar: 800px; #Content_masonry .masonry_box ( lebar: 170px; padding: 10px; margin-Right: 10px; margin-bottom: 10px; |
Sekarang tetap menambahkan PHP, yang akan menghasilkan HTML, dalam hal ini saya akan menggunakan WP_Query untuk menampilkan 20 posting dari kategori Masonry, misalnya, dalam tampilan halaman (halaman.php):
< div id = "content_masonry" > $ Linksposts \u003d new wp_query (); $ Linksposts -\u003e Query ("Showposts \u003d 20 & Cat \u003d 10"); have_posts ()): $ linksposts -\u003e the_post (); \u003e < div class = "masonry_box" > < div class = "masonry_box_inner" > < h2 > < a href = " Id, "url", true)) echo get_post_meta ($ post -\u003e id, url, true); Lain the_permalink (); ?\u003e "> < / a > < / h2 > |
Selamat siang untuk semua orang! Ini artikel kedua saya tahun ini. Saya menerbitkan yang pertama tentang font ikon baru-baru ini dan saya senang bahwa saya menemukan waktu untuk menulis artikel kedua dengan margin kecil seperti itu. Sejauh ini, bagi saya itu adalah celah kecil, karena Lebih sering tidak menulis kesempatan, tetapi saya mencoba. 😎 Dan sekarang mari kita berurusan dengan apa yang akan dibahas dalam artikel ini.
Mungkin banyak dari Anda telah melihat di situs lokasi elemen (gambar, artikel, berbagai blok) efek bata. Anda katakan - apakah mungkin dilakukan melalui CSS? Mungkin itu mungkin, tetapi hanya fleksibilitas seperti itu tidak akan. Script itu sendiri menempatkan item pada halaman menggunakan ruang vertikal. Juga, saat memposisikan blok, skrip menambahkan animasi. Dimungkinkan untuk menyalahkan dalam desain adaptif, mengurangi jendela browser. Jadi, semuanya dicapai dengan perpustakaan JavaScript kecil - Masonry. Script ini sangat banyak digunakan dalam desain tren modern. Saya tidak tahu bagaimana dalam pagan Rusia, tetapi di produsen internet yang terlalu tinggi mendapat popularitas besar.
The Author Masonry adalah David Desandro dari AS. Saya ingin memberitahunya terima kasih banyak atas naskah yang bagus. Perpustakaan ini didistribusikan sepenuhnya gratis, sehingga Anda dapat dengan aman menggunakannya di situs web Anda.
Saya pikir banyak yang disukai. Bahkan, semuanya terlihat sangat bagus. Mari kita berurusan dengan cara bekerja dengan pasangan bata, bagaimana cara membawa blok kami di situs kami dengan efek bata?
Struktur artikel
Pertama, kita perlu pergi ke halaman skrip - http://maasonry.desandro.com dan unduh versi terbaru. Pada saat penulisan artikel ini, versi ini adalah 4.0. Juga di situs ini Anda akan menemukan dokumentasi terperinci dalam bahasa Inggris. Saya merujuk pada skenario poin utama dari dokumentasi - cara menghubungkan, opsi mana yang tersedia, dll. Saya tidak akan memengaruhi segalanya, karena Saya sendiri tidak mengetahuinya dalam beberapa poin. Untuk memperkenalkan situs Anda, Anda perlu melakukan tindakan minimum. Anda sekarang terbiasa dengan ini.
Pada situs web unduhan ada dua versi skrip - dikompresi (diminimalkan) dan tidak terkompresi. Lebih baik digunakan dengan tepat - Masonry.pkgd.min.js. Juga, perpustakaan dapat dimuat dari CDN:
terkompresi
dikompresi (diminimalkan)
Saya menyarankan Anda untuk menghubungkan versi Masonry yang diminimalkan dari CDN. Jadi kami mengurangi jumlah permintaan HTTP yang tidak perlu. Secara umum, apa pun skrip yang Anda hubungkan jika Anda dapat menghubungkan versi yang ditingkatkan dengan CDN, lalu hubungkan.
Untuk bekerja bata, kita perlu membuat blok induk dan meletakkan elemen di dalamnya.
Untuk kejelasan, saya membuat halaman demo dengan gambar berbagai ukuran. Saya mengambil gambar sebagai contoh elemen, karena Mereka memiliki ketinggian yang berbeda, tetapi alih-alih gambar mungkin ada blok: teks, video, dll. Cobalah untuk mengurangi jendela browser dan Anda akan melihat gambar dengan lancar mengubah posisi Anda.
Mari kita lihat seperti apa kode HTML:
...
#Container (batas: 1px solid #ccc; margin: 0 otomatis; padding: 50px 0; lebar maks: 1170px;) / * elemen mesh * / .element-item (batas: 2px padat RGBA (0, 0, 0, 0, 0, 0.35); margin-bottom: 15px; padding: 1px; lebar: 280px) / * / elemen mesh * / h1 (teks-align: margin: 0 50px)
Seperti yang Anda lihat, CSS digunakan di sini minimal.
Inisialisasi Masonry Plugin.
Anda dapat melakukan ini dengan beberapa cara.
Inisialisasi Masonry melalui Javascript
Anda dapat menggunakan Masonry sebagai JQuery-Plugin:
$ ("Selector"). Masonry ();
Tetapi perlu diingat bahwa untuk metode ini Anda harus terhubung ke perpustakaan jQuery:
Pada halaman demo saya menginisialisasi Masonry sebagai JQuery-Plugin, I.E. Saya memiliki kode inisialisasi berikut:
JQuery (dokumen) .Ready ($) ($ ("elemen-gride"). Masonry (// Pilihan itemSelektor: ". Barang-barang", kolomwidth: 300));););
Jika Anda menggambar metode "Masonry ()", kami melewati dua opsi: itemSelector dan kolomwidth. Ini diperlukan dua opsi. Menurut pengembang, mereka diperlukan untuk operasi normal skrip. Namun, kami akan berbicara tentang opsi tepat di bawah ini. Semuanya, setelah tindakan ini, harus bekerja segalanya.
Inisialisasi dengan vanili Javascript
Anda dapat menggunakan Masonry juga dengan Vanilla JS:
Masonry Baru (Elem, Opsi)
Masonry () konstruktor mengambil dua argumen: elemen anak dari wadah dan opsi objek. Kode inisialisasi akan menjadi berikut.
Var elem \u003d document.queryselector (". Elemen-gride"); var MSNRY \u003d Masonry Baru (Elem (// Pilihan itemSelektor: ". Barang-barang", kolomwidth: 200)); // argumen elemen dapat berupa string pemilih // untuk elemen individu var msnry \u003d bocot baru (". Elemen-gride", (// opsi));
Jujur, saya tidak bekerja dengan vanilla js, oleh karena itu, saya tidak bisa mengatakan secara khusus apa yang baik daripada jQuery. Ketahuilah bahwa ada metode seperti itu.
Inisialisasi melalui HTML
Anda dapat menginisialisasi Masonry melalui HTML, tanpa menulis kode javascript baris tunggal. Untuk melakukan ini, Anda harus menambahkan atribut- "Data-Masonry" wadah untuk semua elemen anak. Opsi dapat ditransfer sebagai nilai.
Parameter yang ditransmisikan harus sesuai dengan format JSON. Saya ingin menarik perhatian Anda pada penggunaan kutipan dalam kode. Kutipan untuk Atribut Data-Masonry adalah lajang, dan untuk opsi yang ditransmisikan - ganda. Itu. Begitulah tampilannya pada contoh.
Opsi ini dapat digunakan jika Anda tidak ingin menggunakan JavaScript berlebih di situs. Misalnya, saya tidak akan segera mengirimkan jQuery jika dia tidak digunakan di mana saja di situs.
Ini adalah perpustakaan. Tidak ada yang rumit. Apa berikutnya?
Ukuran elemen.
Dimensi elemen putri dapat diperbaiki dan karet. Dengan ukuran tetap (lebar dan tinggi) dari lebar blok dari blok dan desain diatur dalam file CSS Styling. Tinggi Saya ingin mengatakan jika Anda menggunakan blok kosong, tinggi blok akan diobati dengan browser berdasarkan isinya. Dalam kasus saya, saya tidak bertanya tinggi, karena Gambar jadi memiliki tinggi badan Anda sendiri.
...
GRID Karet
Dengan jaringan karet, lebar elemen ditetapkan sebagai persentase. Kisi karet terutama digunakan dalam desain adaptif. Kami akan berbicara lebih banyak tentang opsi di bawah ini.
...
Imagesloaded.
Terkadang, ketika halaman dimuat, mungkin terjadi bahwa elemen akan saling tumpang tindih. Pada saat yang sama, mereka akan semua dalam satu benjolan dan terlihat mengerikan. Jadi Anda dapat memecahkan masalah ini dengan perpustakaan kecil - imagesloaded.. Hal terbaik dimanifestasikan dengan saya dengan desain adaptif. Saat itulah saya membuka situs dari ponsel grid gambar saya akan satu tumpukan.
Hubungkan gambar dengan CDN:
Menggunakan item imajainade diposisikan pada halaman hanya setelah pemuatan penuh.
// init masonry var $ grid \u003d $ (". grid"). Masonry ((// opsi ...)); // tata letak batu setelah setiap gambar memuat $ grid.magesloaded (). Kemajuan (fungsi () ($ grid.maasonry ("tata letak");));
Atau menginisialisasi pasangan bocot hanya setelah pemuatan penuh semua gambar.
Var $ grid \u003d $ (". Grid"). Imagesloaded (Fungsi () (// init Masonry setelah semua gambar telah memuat $ grid.masonry (// opsi ...));)););
Opsi (Opsi)
Sekarang mari kita bertanya-tanya apa yang bisa kita lulus metode opsi masonry ().
Semua opsi dikelompokkan. Yah, itu dilakukan agar lebih mudah menavigasi mereka.
Sekarang mari kita lihat opsi apa yang termasuk dalam kelompok tertentu.
itemSelector.
Opsi ini menunjukkan elemen apa efek masonry akan diterapkan. Berguna untuk menentukan opsi ini, karena kita dapat memotong item yang bukan bagian dari tata letak. Parameter ini sudah akrab bagi kami ketika kami membongkar inisialisasi batu.
ItemSelector: ". Barang-Barang"
lebar kolom.
Menentukan lebar elemen tata letak. Jika parameter ini menghilangkan batu akan mengambil lebar eksternal elemen pertama. Pengembang selalu menyarankan untuk menentukan lebar speaker, apakah itu elemen tetap atau karet.
Kolomwidth: 80.
Ukuran elemen (ukuran elemen)
Jika kita ingin membuat tata letak kita dengan elemen karet, misalnya, dengan desain adaptif, maka untuk keperluan ini ada parameter yang membuat jaringan karet kita.
persenposisi
Kami membongkar kode grid karet di atas, tetapi opsi tidak masuk ke detail.
...
Seperti yang kita lihat, untuk mengaktifkan kisi karet, kami menambahkan parameter persenposition ke kode inisialisasi dengan nilai Boolean " benar.". Dan sebagai lebar menunjukkan kelas elemen di mana lebarnya ditentukan dalam CSS.
selokan.
Antara elemen, Anda dapat mengatur indent horizontal menggunakan opsi. selokan., Melewati jumlahnya. Angka akan sesuai dengan retret dalam piksel.
Selokan: 15.
Indentasi vertikal antara elemen diatur dalam CSS.
Elemen-item (margin-bottom: 15px;)
Indentasi dapat ditetapkan sebagai persentase, I.E. Mereka akan bervariasi tergantung pada ukuran jendela browser.
...
Kami membuat blok div kosong sebelum daftar item.
CSS untuk blok ini menunjukkan lebar dalam persen. Dan dalam opsi kode inisialisasi selokan. Kami mengindikasikan kelas elemen kosong ini. Script itu sendiri akan menciptakan lekukan dalam persen, berdasarkan lebar blok ini.
stempel.
Opsi ini dapat ditetapkan item yang akan dicap di grid Masonry. Elemen yang tersisa akan berada di bawah dan akan bersaing dengan cap. Terkadang bisa bermanfaat. Pilihan stempel. Kami melewati kelas elemen cap.
Cap: ".Stamp"
Anda dapat melihat lebih detail di Codepen, serta edit jika perlu.
fitwidth.
Inti dari opsi ini adalah bahwa ketika kami mengaktifkannya oleh blok elemen induk, lebar tetap dalam piksel ditambahkan. Selain itu, lebar blok induk sama dengan jumlah lebar semua elemen anak. Dengan demikian, menentukan dalam aturan blok induk CSS " mARGIN: 0 AUTO»Kita dapat memposisikan blok dengan elemen masonry di tengah.
Elemen-Gride (Margin: 0 AUTO;) isfitwidth: Benar
Perhatian! Opsi ini tidak berfungsi dengan elemen yang lebarnya ditunjukkan dalam persen. Nilai opsi "Columnwidth" harus ditentukan dalam piksel, misalnya, "kolomwidth: 120". Kalau tidak, elemen dapat diambil satu sama lain.
nationalleft.
Secara default, semua elemen mesh diselaraskan ke kiri. Dengan opsi nationalleft. Anda dapat mengubah aliran horizontal item dan mengatur penyelarasan ke kanan kiri. Cukup untuk lulus nilai Boolean " salah. "
Nationalleft: FALSE.
origintop.
Juga, serta secara horizontal, elemen grid default diselaraskan di tepi atas. Dengan opsi origintop. Anda dapat mengubah aliran item secara vertikal dan mengatur penyelarasan dari bawah ke atas, kira-kira seperti di Tetris 🙂.
Origintop: Salah.
SETUP (SETUP)
Buka opsi Pengaturan.
wadah
Opsi ini membatalkan gaya elemen kontainer induk. Secara default, induk diatur ke aturan "Posisi: Relatif". Aturan ini dapat dibatalkan.
Wadahtyle: null.
Tentu saja, dimungkinkan untuk menimpa melalui file CSS menggunakan "! Penting", tetapi saya tidak suka melakukannya. Secara umum, saya pikir ini adalah aturan nada buruk dalam tata letak. Lebih baik membersihkan gaya, semakin banyak pengembang memberi kita kesempatan ini.
transisi.
Durasi transisi ketika item mengubah lokasi mereka. Waktu default diatur - 0,4 detik. Format waktu ditetapkan sebagai format waktu CSS.
TransitionDuration: "0,4s"
Berikut adalah beberapa contoh pengaturan waktu.
// transisi animasi cepat: "0.2s" // lambat transisi animasi: "0.8s" // Tidak ada transisi animasi: 0
ubah ukurannya
Dengan opsi ini, Anda dapat membatalkan perubahan dalam ukuran blok induk. Itu. Secara default, jika Anda tidak menentukan ukuran tetap ke induk dengan pengurangan layar browser, elemen grid anak kami akan mengubah lokasi mereka, akan bergerak turun, menempati ruang kosong. Jadi dengan opsi "Ubah ukuran", Anda dapat membatalkan transisi.
Ubah ukuran: Salah
Jujur, efek yang sama dapat dicapai jika Anda meminta induk hanya ukuran tetap. Di sini saya tidak mengerti pengembang - baik saya salah paham sesuatu, atau opsi ini berlangsung dalam kasus-kasus tertentu. Anda dapat melihat detail lebih lanjut tentang contoh di Codepen. Cobalah untuk mengubah ukuran layar browser. Kemudian ubah "Ubah ukuran: SALAH" pada "Ubah ukuran: Benar" Dan Anda akan mengerti apa yang kita bicarakan.
initlayout.
Opsi ini mengaktifkan grid bata kami saat menginisialisasi skrip. Secara default, dihidupkan - "Initlayout: Benar". Tetapi Anda dapat membatalkan.
Initlayout: Salah
Anda dapat menggunakan metode dan acara sebelum mengaktifkan grid. Misalnya, Anda dapat melakukannya sehingga grid Anda akan diaktifkan dengan mengklik tombol tertentu. Nah, lalu sesuatu seperti itu.
Dalam artikel ini, saya tidak akan membongkar peristiwa dan metode, karena Artikel jadi ternyata volumetrik. Anda dapat secara mandiri menjelajahi mereka di situs web pengembang. Juga akan menemukan contoh implementasi. Semuanya cukup dimengerti. Tidak selalu oleh penulis skrip ditulis instruksi tersebut. Untuk instruksi Pengembang Masonry, saya akan menempatkan keras - 5 . 🙂
Masonry pada CSS murni
Ada juga opsi untuk mengimplementasikan bata pada CSS murni. Saya tidak akan memberikan semua kode di sini. Anda dapat melihat codepen, tidak ada yang rumit. Dalam hal ini, lebih mudah untuk fakta bahwa Anda tidak perlu menghubungkan perpustakaan JS tambahan dan memahami opsi plug-in.
Pada prinsipnya, semua yang saya nyatakan di atas sudah cukup untuk menggunakan efek bata di situs web Anda.
Dan pada semua ini. Terima kasih atas perhatian Anda. Tentukan pertanyaan dalam komentar, saya akan selalu dengan senang hati membantu. Sampai jumpa di artikel-artikel berikut. Sampai!
Saya mengatakan bagaimana memodifikasi desain blog baru, dengan naif percaya bahwa semua pekerjaan penting sudah dilakukan. Tapi, ternyata, masih ada banyak pekerjaan. Selain itu, saya membuat bagian saya sendiri. Tapi hal pertama yang pertama. Dalam posting ini, saya akan menyentuh pertanyaan-pertanyaan berikut:
- cara memperkenalkan chip WordPress baru dalam hal pendaftaran - Rekam format;
- cara Memperbaiki Masalah Posisi Blok dalam Script Masonry;
- cara menerapkan Masonry ke situs mana pun.
Jadi, bagaimana dengan tukang batu dan javascript? Ternyata ada titik kontak yang umum! Saya harap semua orang tahu siapa tukang batu. Jika tidak, inilah definisi singkat:
Mason.atau frank-Mason - Dalam terjemahan literal "bricklayers gratis", gerakan yang muncul pada abad XVIII dalam bentuk organisasi tertutup. Freemasonry berasal dari sumber-sumber yang sedikit diketahui di akhir XVI - awal abad XVII, diduga lokakarya operasional Mason. Semua kegiatan para Mason sangat simbolis, banyak dikaitkan dengan simbolisme arsitektur dan salah satu karakter dasar adalah piramida terpotong.
Saya sangat tertarik dengan Mason dan semua yang terhubung dengan mereka. Itu sangat menarik. Saya ingin berbicara dengan seorang tukang batu nyata (tetapi tidak dengan seperti itu, yang hanya demi Ponte, menyebut dirinya seorang tukang batu gratis, yaitu, dengan tuan nyata). Tapi ini bukan masalahnya. Dan pada kenyataan bahwa dalam topik desain PINBIN menggunakan skrip yang menyebabkan blok dengan pengumuman catatan untuk berbaris sebagai batu bata. Sekarang gaya yang sangat populer, berbagai cara digunakan untuk menerapkan efek seperti itu, tetapi salah satu yang terbaik tidak diragukan lagi Javascript Masonry..
Situs web resmi JavaScript ini adalah Masonry.Desandro.com, menunjukkan cara kerjanya dan menunjukkan cara menghubungkannya ke situs. Selain itu, itu bisa berupa situs apa pun, belum tentu wordpress, a dan dle atau umumnya html statis. Tetapi perlu dikatakan bahwa di WordPress dari versi terakhir (dari 3,8, jika saya tidak salah) Script Masonry sudah termasuk dalam paket dasar. Tetapi seperti yang telah disebutkan - semuanya beres.
Bagaimana cara menerapkan catatan format dukungan WordPress WordPress?
Jadi dalam proses penyempurnaan, saya memutuskan untuk memasukkan tema pendaftaran saya fungsi-fungsi yang hilang berfungsi di dalamnya sehingga pada yang utama dapat mempublikasikan status, galeri, gambar atau video, dengan desain blok ini yang berbeda. Saya mencari-cari di arsip desain dan menemukan sejumlah kecil topik-topik yang mendukung fungsi ini.
Tetapi jika Anda memperbarui WordPress Anda, format catatan dapat diimplementasikan dalam subjek, dan ini mudah. Jadi, pertama-tama buka file fungsi.php.tema pendaftaran Anda dan tambahkan kode berikut untuk itu:
Add_action ("after_setup_theme", "slug_post_formats"); Fungsi slug_post_formats () (post-format, array ("samping", "gambar", "video", "audio", "kutipan", "tautan", "galeri", "status", "status", "",); )
Kode ini dapat dimasukkan ke dalam lokasi apa pun file. fungsi.php., Yang utama bukan untuk memecahkan fungsi apa pun. Jika semuanya dilakukan dengan benar, maka saat membuat catatan baru, Anda harus memiliki blok format baru, jika tidak, lalu buka menu "Pengaturan Layar" di bagian atas dan tandai blok artikulasi.
Tetapi fitur ini tidak akan berfungsi sampai file khusus muncul di folder dengan tema, dengan nama jenisnya konten-sesuatu.php. - Dalam nama file "Sesuatu", ini adalah indikasi template yang memformat file ini.
Mereka bisa menjadi:
Format tidak perlu menggunakan segalanya, tetapi Anda dapat menentukan dalam kode di atas hanya yang Anda butuhkan misalnya, jika Anda hanya perlu video, satu gambar dan galeri, lalu masukkan ke dalam fungsi.php.kode seperti itu:
Add_action ("after_setup_theme", "slug_post_formats"); Fungsi slug_post_formats () (pasca-format, array ("gambar", "video", "galeri",));)
Nah, Anda hanya perlu file yang tercantum dalam baris: konten-gambar.php, konten-video.phpdan konten-gallery.php. sebuah tambahan konten.php. Untuk catatan biasa. Dari mana file-file ini berasal? Anda dapat mengharapkannya dari topik dua puluh belas (atau format pendukung lainnya, misalnya, peti) dan kemudian menyempurnakan. Cukup unduh topik ini ke komputer Anda, ambil file yang Anda butuhkan dan isi ke server ke folder dengan desain Anda. Setelah itu, mereka akan muncul di konsol di bagian Penampilan -\u003e Editor. Selain itu, file-file ini perlu dibawa ke format yang diperlukan, Anda juga perlu membuat gaya dalam file gaya.css..
Ini adalah pekerjaan yang melelahkan, tetapi akan melunasi seratus kali lipat. Saya akan menunjukkan contoh file-file tersebut (kira-kira saya menggunakannya di blog ini):
Konten-status.php File:
File konten-video.php dan konten-gallery.php sama sekali sama:
File konten.php:
">
Sedikit penggalian, Anda dapat mengetahui apa yang membuat template Anda sendiri untuk format catatan. Pada saat yang sama, Anda tidak boleh melupakan gaya CSS. Tetapi di sini saya tidak dapat memberikan rekomendasi apa pun karena ini adalah pertanyaan yang sangat spesifik dan tergantung pada topik pendaftaran tertentu.
Jika kesulitan muncul, atau sesuatu yang tidak dapat dipahami - Anda dapat membantu dalam komentar daripada yang saya bisa.
Nah, format catatan tertanam dan bekerja dengan sempurna. Tetapi tidak ada sesuatu ... mereka bekerja dengan baik, tetapi dengan naskah batu mereka tidak ingin menjadi teman. Misalnya, ketika memasukkan galeri menggunakan format perekaman yang sesuai, di bawah galeri ada ruang besar, tentang sifat yang sama, yang dari posting sebelumnya, di mana saya berbicara tentang kesenjangan aneh antara pengumuman ketika menggunakan font Web dari Google Font. Inilah masalah ini kita akan belajar untuk memutuskan di bawah ini.
Cara Memperbaiki Masalah Posisi Blok dalam Script Masonry
Biarkan saya mengingatkan Anda tentang esensi dari masalah: ketika menggunakan font Google Font dalam pekerjaan skrip Masonry, masalah muncul dalam bentuk tinggi istirahat antara pengumuman artikel. Efek yang sama, hanya jauh lebih terlihat dan penggunaan format rekaman, khususnya saat memasukkan galeri galeri ubin dari Jetpack Pagin.
Seperti yang saya katakan, saya menggunakan paket jetpack di blog saya, di mana ada plugin yang luar biasa dari galeri ubin modis, tetapi ketika memasukkan galeri seperti itu di bawah periode besar muncul:
Script Masonry adalah untuk disalahkan, itu adalah skrip Masonry: Ketika menggunakan font Web, itu berfungsi lebih awal dari font dimuat dan oleh karena itu, pada akhir beban halaman penuh, blok sedikit rata. Mungkin ada pilihan lain - ketika blok awalnya menjadi halus, dan kemudian menyentak satu sama lain.
Galeri hampir sama: ketika membangun galeri galeri ubin yang indah dari Jetpack, sebuah naskah yang menghitung ukuran gambar menghabiskan banyak waktu untuk ini (dan itu dilakukan dalam beberapa tahap), dan for masonry jauh lebih cepat dan untuk Posisikan blok menggunakan data pertama yang masuk (menengah) yang mengembalikan skrip galeri ubin. Oleh karena itu, celah ini muncul.
Untuk bertarung ini di situs Masonry resmi (lihat di atas) Ada penjelasan: Bagian Imaging dan Font Web. Anda bisa berkenalan dengan metode resmi pada tautan yang ditentukan. Tetapi untuk menyederhanakan pekerjaan untuk memperbaiki kesalahan ini, saya akan memberikan rekomendasi saya.
Untuk mengelola parameter skrip masonry, saya menggunakan file fungsi.js. Di mana saya meresepkan instruksi yang diperlukan dan menghubungkannya di template. Pertama, saya tentukan parameter animasi, dan kemudian masukkan kode yang memperbaiki kesalahan. Saya akan memberikan konten file ini sepenuhnya dengan komentar, Anda dapat menggunakannya dengan hampir tidak ada perubahan:
/ * Definisi parameter utama Masonry * / jQuery (Dokumen) .Ready ($ ("# post-area"). Masonry (/ * menunjukkan ID blok yang kami gunakan Masonry * / isanimated: Benar, / * Untuk menonaktifkan animasi blok, tempat yang salah * / animasiOptions: (Durasi: 500, / * Kecepatan animasi dalam milidetik * / pelonggaran: "linear", antrian)))))))))));); / * Koreksi masalah dengan galeri * / / * Aktifkan keterlambatan eksekusi Masonry * / / * sampai semua gambar dimuat * / / * Mulai * / (fungsi (# post-area "); / * Catatan: Di sini Anda juga perlu Untuk menentukan ID blok * / $ wadah.magesloaded (fungsional () ($ kontainer.masonry ();));)) (jquery); / * Akhir * / / * Memperbaiki masalah dengan font web * / / * Mulai * / fungsi trigegermaasonry () (jika (! $ Kontainer) (kembali;) $ kontainer.masonry (());) $ (());); $ kontainer \u003d $ ("# pasca-area"); trigegermaasonry ();)); Typekit.load ((aktif: trigegermasonry, tidak aktif: trigegermasonry)); / * Akhir * /
Pilih apa yang Anda butuhkan, dan komentar dan bagian yang tidak perlu dari skrip dapat dihapus, misalnya, jika Anda hanya memiliki masalah dengan font web, penundaan saat memuat gambar dapat dihapus.
Hubungkan file ini di templat. Dalam file subjek header.php.sebelum tag penutup Memasukkan:
By the way, kode ini dapat dihubungkan langsung pada halaman, juga sebelum tag penutup Memasukkan:
Efeknya akan kira-kira sama, meskipun JavaScript lebih terhubung dengan file.
Ngomong-ngomong, jika Anda memiliki wordpress, maka sambungkan skrip masonry itu sendiri dan file pengaturan dimungkinkan melalui file. fungsi.php.dalam topik Anda, hanya menambahkan kode ke dalamnya:
Fungsi mason_script () (wp_register_script ("Masonry", "/ input j. / File / maasonry.pkg.min.js"); wp_enqueue_script ("masonry.functions", "path / file / functions.js"); Wp_enceue_script ("Masonry");) add_action ("wp_enqueue_scripts", "mason_script");
Tentu saja, itu semua tidak akurat instruksi dan panduan untuk bertindak, tetapi hanya rekomendasi umum, karena setiap kasus unik dan menciptakan panduan universal hampir tidak mungkin. Jika Anda memiliki pertanyaan - tanyakan di komentar.
Cara mengimplementasikan Masonry di situs mana pun
Sekarang bayangkan situasi bahwa situs kami tidak aktif Cms wordpress. versi terakhir, tapi katakanlah DLE (Mesin DataLife) Dan kami juga ingin lokasi blok yang indah menggunakan pasangan bata.
Semua sangat sederhana. Pertama, Anda mengunduh dari file masonry situs web resmi masonry.pkgd.min.js. . Tuang ke server Anda dan hubungkan di template. Untuk dle dalam file topik main.tpl. ke tag penutup Memasukkan:
Sekarang kita mendefinisikan struktur blok, di mana pasangan bata akan bekerja. Misalnya, jadi:
Dalam CSS Anda perlu menentukan sesuatu seperti:
Mason-Box (Lebar: 25%;). MASMON-BOX LEBAR (Lebar: 50%;)
Sekarang halaman perlu diinisialisasi operasi skrip:
Sekarang saya akan menunjukkan contoh yang benar-benar menjalankan:
1. Hubungkan file masonry.pkgd.min.js. Seperti yang ditunjukkan di atas.
2. Pada halaman melalui HTML, inisialisasi skrip:
3. Berikut ini direkam dalam CSS:
Halfnews-content (padding: 0 5px 5px 10px; margin-bottom: 15px; batas: 1px solid # e9e9e9; -webkit-box-shadow: 0 0 1 px #bbb; 0 0 1px #BBB; Box-shadow: 0 0 1px #bbb; lebar: 345px; / * Item yang sangat penting - ada lebar blok * / / * Jika lebih dari yang Anda butuhkan, maka blok atau tidak dapat * / / * melarikan diri secara horizontal atau terlampir Pada teman * / margin-kiri: 10px; / * Itu diatur ke kejauhan secara horizontal antara blok * /)
Berikut adalah desain sederhana di halaman utama situs web Technotron (di mana kontennya berada dalam dua kolom).
Itu dia. Jika saya salah di suatu tempat, itu tidak sengaja, hanya posting cepat dan saya ingin banyak, jadi kesalahan tidak dikecualikan - jika sesuatu tidak keluar atau di suatu tempat kesalahan yang jelas: Tolong mengerti, kami akan menemukan cacat dan kami akan menemukan cacat dan benar. Maaf untuk kotamadya metode yang dijelaskan.
Sejauh ini. Saya harap itu bermanfaat.
Alih-alih epiloga:
Rahasia bisnis yang sukses:
1. Wher mengenalnya.
2. Sam entah bagaimana keluar
Tag :,,
Pisano 08/01/2014. 
