Mencipta susun atur carian imej Google dengan CSS-industri IT-php.cn

Mencipta susun atur carian imej Google dengan CSS

Takeaways Key

Dalam projek yang baru -baru ini saya terlibat, saya diminta untuk mencipta fungsi pengembangan carian imej Google, sama dengan tangkapan skrin yang ditunjukkan di bawah, tetapi dalam format grid tegar.

Reaksi segera saya ialah saya perlu menggunakan JavaScript untuk menetapkan beberapa susun atur dan ciri -ciri model kotak yang saya sentiasa enggan lakukan dan hanya akan dilakukan sebagai usaha terakhir. Memandangkan terdapat contoh yang sudah sempurna, saya memutuskan untuk membuka alat pemaju untuk melihat bagaimana Google melakukannya (mengapa mencipta semula roda, betul?) Mencipta susun atur carian imej Google dengan CSS ternyata bahawa Google memecahkan struktur ke dalam dua div, satu div mengandungi semua sel imej dan div yang lain adalah untuk kawasan yang berkembang. Sebaik sahaja imej diklik (dan diperluas), JavaScript memasukkan div spacer selepas sel imej terakhir dalam baris div yang diklik. JavaScript menetapkan ketinggiannya sama seperti Div yang diperluas, dan meletakkan Div yang diperluas sepenuhnya ke dalam kedudukan yang div Spacer menduduki. Ini pandai, tetapi tidak sesuai kerana ia bergantung kepada JavaScript.

Saya mempunyai idea asas bahawa saya telah berjaya berkembang menjadi demo kerja menggunakan CSS untuk semua sifat model susun atur dan kotak. Satu -satunya JavaScript yang diperlukan ialah menukar nama kelas berdasarkan togol pengembangan.

markup asas

Pertama sekali, kita perlu membina bekas grid. Inilah HTML:

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

Salin selepas log masuk

markup di atas mengandungi satu contoh. Simpanan elemen sel yang perlu diduplikasi untuk setiap imej dalam grid. Sila ambil perhatian pengenal untuk #close-jump-1 dan #expand-jump-1, dan atribut HREF berikutnya perlu menjadi unik kepada .Image__cell. Pautan hash seperti: href = "#expand-jump-1" membolehkan penyemak imbas melompat ke sel imej aktif apabila ditekan.

CSS

Pertama kita menggunakan kotak-sizing: kotak sempadan; kepada semua elemen termasuk: sebelum dan: selepas elemen pseudo menggunakan pemilih sejagat. Ini akan membolehkan pengendalian elemen mudah yang menggabungkan lebar peratusan dengan nilai padding tetap, kerana ia menggabungkannya.

<span>/* apply a natural box layout model to all elements,
</span><span>   but allowing components to change */
</span>
<span>html {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>*<span>, *:before, *:after</span> {
</span>  <span>box-sizing: inherit;
</span><span>}</span>

Salin selepas log masuk

elemen grid .Image diberikan limpahan ClearFix: tersembunyi; untuk mengekalkan susun atur berdasarkan sel terapung sel.

<span><span>.image-grid</span> {
</span>  <span>width: 100%;
</span>  <span>max-width: 1310px;
</span>  <span>margin: 0 auto;
</span>  <span>overflow: hidden;
</span>  <span>padding: 10px 5px 0;
</span><span>}
</span>
<span><span>.image__cell</span> {
</span>  <span>float: left;
</span>  <span>position: relative;
</span>  <span>width: 20%;
</span><span>}
</span>
<span><span>.image--basic</span> {
</span>  <span>padding: 0 5px;
</span><span>}
</span>
<span><span>.basic__img</span> {
</span>  <span>display: block;
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>margin: 0 auto;
</span><span>}
</span>
<span><span>.image__cell.is-collapsed .arrow--up</span> {
</span>  <span>display: block;
</span>  <span>height: 10px;
</span>  <span>width: 100%;
</span><span>}
</span>
<span><span>.image--large</span> {
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>display: block;
</span>  <span>padding: 40px;
</span>  <span>margin: 0 auto;
</span>  <span>box-sizing: border-box;
</span><span>}</span>

Salin selepas log masuk

Lebar yang diberikan kepada sel imej bersamaan dengan 100 dibahagikan dengan bilangan item setiap baris, dinyatakan sebagai peratusan. Dalam contoh ini, terdapat 5 item setiap baris yang bermaksud bahawa setiap .Image__cell adalah 20% lebar.

Perhatikan bahawa padding: 10px 5px 0; Digunakan untuk grid .Image digabungkan dengan padding: 0 5px; pada .Image-Basic, dan ketinggian: 10px; pada .image__cell.is-collapsed .arrow-up memberikan kesan bingkai tetingkap yang sama di sekitar imej berjubin. Kita boleh meningkatkan jurang antara imej, dengan mengubah nilai -nilai ini.

Akhir sekali, elemen imej .basic__img diberikan paparan: blok; untuk mengelakkan sebarang masalah jarak. THEMAX-WIDTH: 100%; dan ketinggian: auto; Pengisytiharan membolehkan imej skala ke lebar bekasnya sementara tidak melebihi lebarnya sendiri.

CSS di bawah menyediakan susun atur untuk kawasan yang boleh diperkembangkan.

<span><span>.image__cell.is-collapsed .image--basic</span> {
</span>  <span>cursor: pointer;
</span><span>}
</span>
<span><span>.image__cell.is-expanded .image--expand</span> {
</span>  <span>max-height: 500px;
</span>  <span>margin-bottom: 10px;
</span><span>}
</span>
<span><span>.image--expand</span> {
</span>  <span>position: relative;
</span>  <span>left: -5px;
</span>  <span>padding: 0 5px;
</span>  <span>box-sizing: content-box;
</span>  <span>overflow: hidden;
</span>  <span>background: #222;
</span>  <span>max-height: 0;
</span>  <span>transition: max-height .3s ease-in-out,
</span>              margin-bottom <span>.1s .2s;
</span>  <span>width: 500%;
</span><span>}</span>

Salin selepas log masuk

Berikut adalah beberapa nota untuk mengambil dari kod di atas:

Kursor berubah menjadi penunjuk apabila melayang. Ini memberikan penunjuk visual kepada pengguna yang mengklik pada imej akan melakukan sesuatu.
ketinggian max elemen .Image-Expand ditetapkan kepada 0 dalam keadaan awalnya. Ketinggian max diberi nilai 500px apabila elemen sel .image mempunyai kelas yang diperluas. Perhatikan bahawa jika kawasan yang berkembang semakin meningkat, nilai ketinggian maksimum perlu ditingkatkan juga agar seluruh kawasan dipaparkan.
peralihan yang digunakan untuk ketinggian max-tinggi dan margin membenarkan kesan gelongsor apabila kawasan yang diperluaskan ditukar.
Visual, kami mahu kawasan yang berkembang untuk diselaraskan dengan grid .Image. Untuk melakukan ini, kita perlu menafikan padding mendatar yang ditetapkan dalam elemen grid.
1. Pertama, .Image-Expand diberikan kotak-sizing: kotak kandungan; untuk mengecualikan nilai padding dari lebarnya.
2. The .Image-Expand Element mempunyai lebar 5 kali elemen induknya 500%. Ini membolehkan kawasan yang diperluaskan untuk menduduki seluruh lebar grid .image, tolak padding.
3. Untuk menduduki ruang yang tinggal, elemen .Image-Expand diberikan 5px padding kiri dan kanan.
4. Kedudukan: relatif; dan kiri: -5px pengisytiharan mengalihkan kawasan yang diperluas ke kiri sedikit untuk menafikan nilai padding-grid-grid.

bit pintar

Kami mahu mengalihkan semua .Image-Expand Elements ke Jauh Kiri sejajar dengan sebelah kiri grid .Image. Untuk melakukan ini, kami menetapkan margin negatif bergantung pada kedudukannya dalam baris.

ini adalah tempat nth-of-type masuk:

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

Salin selepas log masuk

Pada mulanya, saya menggunakan Nth-Child untuk mencapai kesan yang sama, tetapi pada projek-projek lain saya telah menemui safari iOS8 untuk menjadi kereta dengan ini jadi saya cuba mengelakkan menggunakannya. Sebaliknya, saya menggunakan Nth-of-type kerana ia sebahagian besarnya berfungsi dengan tujuan yang sama. Sekiranya anda berminat, anda boleh mendapatkan penjelasan ringkas mengenai Nth-of-Type di sini <.>

Di CSS di atas, kami mensasarkan kawasan kedua, ketiga, dan keempat. Nilai margin-kiri bergantung kepada kedudukan elemen dalam baris juga. Perhatikan bahawa elemen pertama dalam setiap baris tidak memerlukan set nilai margin-kiri kerana ia sudah berada di kedudukan yang dikehendaki. Selanjutnya elemen itu adalah dari kiri, semakin kita perlu menolak kawasan yang diperkembangkan kembali ke sebelah kiri (dalam kenaikan -100%). Tanpa melakukan ini, kawasan yang diperkembangkan akan diselaraskan dengan ibu bapanya, seperti yang ditunjukkan di bawah:

Mencipta susun atur carian imej Google dengan CSS

kita juga perlu memasukkan CSS yang ditunjukkan di bawah untuk memastikan bahawa pertama .Image__cell pada setiap baris, selain dari baris pertama, melekat pada kedudukannya ketika sebelumnya.

Sekarang bahawa susun atur asas sudah ada, kita boleh menambah beberapa gaya untuk meningkatkan pengalaman pengguna.

<span>/* apply a natural box layout model to all elements,
</span><span>   but allowing components to change */
</span>
<span>html {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>*<span>, *:before, *:after</span> {
</span>  <span>box-sizing: inherit;
</span><span>}</span>

Salin selepas log masuk

Pertama, anak panah yang menonjol untuk menunjukkan imej mana blok yang diperluas dimiliki oleh:

Perhatikan bahawa gaya anak panah dicapai dengan membuat segitiga CSS, dengan itu menyimpan permintaan HTTP. Kesan ini mudah dicapai dengan menggunakan sempadan yang bijak dan menetapkan ketinggian dan lebar ke 0.

<span><span>.image-grid</span> {
</span>  <span>width: 100%;
</span>  <span>max-width: 1310px;
</span>  <span>margin: 0 auto;
</span>  <span>overflow: hidden;
</span>  <span>padding: 10px 5px 0;
</span><span>}
</span>
<span><span>.image__cell</span> {
</span>  <span>float: left;
</span>  <span>position: relative;
</span>  <span>width: 20%;
</span><span>}
</span>
<span><span>.image--basic</span> {
</span>  <span>padding: 0 5px;
</span><span>}
</span>
<span><span>.basic__img</span> {
</span>  <span>display: block;
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>margin: 0 auto;
</span><span>}
</span>
<span><span>.image__cell.is-collapsed .arrow--up</span> {
</span>  <span>display: block;
</span>  <span>height: 10px;
</span>  <span>width: 100%;
</span><span>}
</span>
<span><span>.image--large</span> {
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>display: block;
</span>  <span>padding: 40px;
</span>  <span>margin: 0 auto;
</span>  <span>box-sizing: border-box;
</span><span>}</span>

Salin selepas log masuk

kami juga mahu anak panah hanya muncul apabila elemen .Image__cell diperluas. Ini dilakukan dengan penambahan kelas .is-diperluas. Akhirnya, kami mahu anak panah kekal di pusat mendatar elemen .Image__cell jadi margin: 0 auto; digunakan.

Sekarang kita sudah bersedia untuk gaya butang "Tutup" yang akan membolehkan pengguna menutup kawasan yang diperluaskan.

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

Salin selepas log masuk

Perhatikan bahawa dengan menggunakan A: Sebelum pseudo-element, kita dapat memasukkan watak '×' ke halaman tanpa ia muncul di DOM, sekali lagi menjimatkan sekurang-kurangnya satu permintaan HTTP. Watak khas yang dimasukkan adalah watak pendaraban yang boostrap juga menggunakan.

jQuery

Akhirnya, jQuery di bawah hanya bertukar-tukar antara kelas .is-diperlihatkan dan .is-collapsed pada klik setiap sel imej dan butang tutup.

Sudah tentu, anda boleh dengan mudah mengelakkan jQuery sama sekali dengan menggunakan `classlist ()` dan teknik asli lain, tetapi anda tidak akan mendapat sokongan penyemak imbas yang mendalam melainkan jika anda sanggup polyfill.

<span>/* apply a natural box layout model to all elements,
</span><span>   but allowing components to change */
</span>
<span>html {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>*<span>, *:before, *:after</span> {
</span>  <span>box-sizing: inherit;
</span><span>}</span>

Salin selepas log masuk

Membuat grid responsif

Mempunyai 5 sel imej pada setiap baris pada peranti yang lebih kecil tidak sesuai, jadi kami dapat mengubah bilangan item setiap baris menggunakan pertanyaan media. Sebagai contoh, CSS di bawah mengurangkannya kepada 2 imej setiap baris.

<span><span>.image-grid</span> {
</span>  <span>width: 100%;
</span>  <span>max-width: 1310px;
</span>  <span>margin: 0 auto;
</span>  <span>overflow: hidden;
</span>  <span>padding: 10px 5px 0;
</span><span>}
</span>
<span><span>.image__cell</span> {
</span>  <span>float: left;
</span>  <span>position: relative;
</span>  <span>width: 20%;
</span><span>}
</span>
<span><span>.image--basic</span> {
</span>  <span>padding: 0 5px;
</span><span>}
</span>
<span><span>.basic__img</span> {
</span>  <span>display: block;
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>margin: 0 auto;
</span><span>}
</span>
<span><span>.image__cell.is-collapsed .arrow--up</span> {
</span>  <span>display: block;
</span>  <span>height: 10px;
</span>  <span>width: 100%;
</span><span>}
</span>
<span><span>.image--large</span> {
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>display: block;
</span>  <span>padding: 40px;
</span>  <span>margin: 0 auto;
</span>  <span>box-sizing: border-box;
</span><span>}</span>

Salin selepas log masuk

Untuk mengelakkan CSS yang digunakan sebelum ini berkaitan dengan 5 item setiap baris, kita perlu sama ada menetapkan semula nilai -nilai ini atau mengekstrak sifat -sifat dan meletakkannya dalam pertanyaan media mereka sendiri, yang dilakukan di codepen di bawah, bersama -sama dengan kod sebelumnya.

Lihat carian imej Google pena di CSS oleh SitePoint (@SitePoint) pada Codepen.

Perhatikan kemasukan fungsi sel yang meludahkan 50 sel imej untuk menyelamatkan saya yang mengganggu.

untuk pencinta sass

Saya tidak mahu mengecualikan pembaca yang tidak menggunakan SASS ketika menulis artikel ini, tetapi saya tidak mahu menolaknya sama ada. Projek ini meminjamkan dirinya sebagai kes penggunaan yang hebat untuk SASS dalam pembangunan, kerana bilangan item setiap baris berkaitan dengan begitu banyak sifat yang berbeza.

Sila lihat demo codepen alternatif berikut. Perhatikan bahawa dalam demo itu saya menggunakan pembolehubah SASS di bahagian atas CSS, yang membolehkan saya menentukan jurang antara imej, lebar imej maksimum, dan imej minimum dan maksimum setiap baris. Menggunakan pelbagai pengiraan, SASS akan dikumpulkan ke dalam CSS berdasarkan pilihan yang disediakan. Ia secara automatik akan mengira pertanyaan media optimum berdasarkan bilangan maksimum item setiap baris, yang akan menyimpan imej dalam dimensi maksimumnya.

Versi SASS ini adalah percubaan, tetapi sila beritahu saya jika anda melihat sebarang pepijat atau penambahbaikan kod berpotensi sama ada versi biasa atau versi SASS.

Soalan Lazim (Soalan Lazim) Mengenai mencipta susun atur carian imej Google dengan CSS

Bagaimana saya boleh mencipta susun atur carian imej Google menggunakan CSS?

Mencipta susun atur carian imej Google menggunakan CSS melibatkan beberapa langkah. Pertama, anda perlu membuat struktur HTML asas untuk imej anda. Ini termasuk membuat div untuk setiap imej dan memberikannya kelas. Seterusnya, anda perlu gaya div ini menggunakan CSS untuk meniru susun atur imej Google. Ini melibatkan menetapkan lebar dan ketinggian div, serta kedudukan mereka pada halaman. Anda juga boleh menambah kesan hover ke imej menggunakan CSS. Akhirnya, anda boleh menggunakan JavaScript untuk menambah fungsi ke imej, seperti membuka versi imej yang lebih besar apabila ia diklik.

Ciri-ciri utama CSS yang digunakan untuk mencipta susun atur Google Images termasuk paparan, grid-templat-lajur, grid-jurang, dan objek yang sesuai. Harta paparan ditetapkan ke grid untuk membuat susun atur grid. Harta grid-template-lajur digunakan untuk menentukan bilangan dan saiz lajur dalam grid. Harta grid-jurang digunakan untuk menetapkan jurang antara sel grid. Harta benda yang sesuai digunakan untuk menentukan bagaimana imej harus diubah saiznya sesuai dengan bekasnya. untuk memenuhi keperluan anda sendiri. Anda boleh menukar bilangan dan saiz lajur dalam grid, jurang antara sel grid, dan saiz imej. Anda juga boleh menambah sifat CSS tambahan untuk menyesuaikan susun atur lagi, seperti menambahkan sempadan atau bayang -bayang ke imej. imej menggunakan JavaScript. Sebagai contoh, anda boleh menambah pendengar acara ke imej yang membuka versi imej yang lebih besar apabila ia diklik. Anda juga boleh menambah fungsi seperti penapisan atau menyusun imej. menjadi beberapa sebab. Pertama, pastikan anda telah melaksanakan sifat CSS dengan betul. Kedua, periksa sama ada imej anda mempunyai nisbah aspek yang sama. Imej Google menggunakan imej nisbah aspek yang sama untuk membuat susun atur seragam. Sekiranya imej anda mempunyai nisbah aspek yang berbeza, susun atur mungkin tidak kelihatan sama. . Pertanyaan media membolehkan anda menggunakan gaya yang berbeza bergantung pada saiz skrin pengguna. Sebagai contoh, anda boleh menukar bilangan lajur dalam grid pada skrin yang lebih kecil untuk memastikan imej masih dipaparkan dengan betul.

Bolehkah saya menggunakan susun atur ini untuk jenis kandungan lain, bukan hanya imej? Anda boleh menggunakannya untuk memaparkan teks, video, atau mana -mana jenis kandungan lain. Pastikan anda menyesuaikan sifat CSS dengan sewajarnya agar sesuai dengan jenis kandungan yang anda paparkan. The: Hover pseudo-class di CSS anda. Sebagai contoh, anda boleh menukar warna sempadan imej apabila pengguna melayang di atasnya, atau anda boleh memaparkan maklumat tambahan mengenai imej.

Jika imej anda tidak sesuai dengan sel grid, ia mungkin kerana nisbah aspek imej tidak sama dengan nisbah aspek sel grid. Anda boleh membetulkannya dengan menggunakan harta benda yang sesuai di CSS anda untuk menentukan bagaimana imej harus diubah saiznya sesuai dengan bekas mereka. Ya, anda boleh menggunakan susun atur ini dengan CMS seperti WordPress. Anda perlu menambah CSS ke fail gaya.css tema anda dan HTML ke fail templat yang sesuai. Anda juga mungkin perlu menambah beberapa kod PHP untuk menghasilkan HTML secara dinamik untuk imej, bergantung pada bagaimana tapak WordPress anda disediakan.

Atas ialah kandungan terperinci Mencipta susun atur carian imej Google dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!