JavaScript melaksanakan grid empat persegi

Dalam pembangunan web, kita selalunya perlu memaparkan imej atau kandungan dalam lajur Salah satu kaedah yang biasa digunakan ialah reka letak grid empat segi. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan susun atur grid empat persegi yang mudah.

Apakah Grid Empat-Gong?

Grid empat persegi ialah kaedah reka letak halaman web yang biasa digunakan Ia membahagikan keseluruhan halaman kepada empat kawasan yang sama, setiap kawasan mengandungi gambar atau sekeping kandungan. Susun atur grid empat persegi boleh memisahkan kandungan halaman dengan baik dan mengelakkan halaman daripada kelihatan terlalu bersepah.

Bagaimana untuk merealisasikan grid empat persegi?

Kami boleh menggunakan HTML dan CSS untuk melaksanakan grid empat segi empat, tetapi di sini kami akan menggunakan JavaScript untuk mencapainya. Proses melaksanakan grid empat segi empat boleh dibahagikan kepada dua langkah: pertama, jana kod HTML dan tambahkannya pada halaman kemudian gunakan CSS untuk melaraskan reka letak dan gaya kod yang dihasilkan.

Jana kod HTML

Kami boleh menggunakan JavaScript untuk menjana kod HTML secara dinamik Kod pelaksanaan khusus adalah seperti berikut:

// 获取四宫格容器元素
var container = document.getElementById("container");

// 定义图片地址数组和标题数组
var imgSrcs = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"];
var titles = ["图片1", "图片2", "图片3", "图片4"];

// 循环生成四个图片块
for (var i = 0; i < 4; i++) {
  // 创建图片容器元素
  var imgContainer = document.createElement("div");
  imgContainer.className = "img-container";
  
  // 创建图片元素
  var img = document.createElement("img");
  img.src = imgSrcs[i];
  img.alt = titles[i];
  
  // 创建标题元素
  var title = document.createElement("p");
  title.textContent = titles[i];
  
  // 将图片和标题添加到图片容器中
  imgContainer.appendChild(img);
  imgContainer.appendChild(title);
  
  // 将图片容器添加到四宫格容器中
  container.appendChild(imgContainer);
}

Dalam kod di atas, kami mula-mula memperoleh empat. -elemen bekas persegi , dan kemudian tentukan tatasusunan alamat imej dan tatasusunan tajuk. Dalam gelung, kami menggunakan kaedah createElement untuk mencipta elemen bekas imej, elemen imej dan elemen tajuk masing-masing dan menambahkannya pada elemen induk yang sepadan.

Gunakan reka letak dan gaya CSS

Seterusnya kita perlu menggunakan CSS untuk melaraskan reka letak dan gaya kod HTML yang dijana secara dinamik. Kod pelaksanaan khusus adalah seperti berikut:

/* 四宫格容器样式 */
#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}

/* 图片容器样式 */
.img-container {
  width: 48%;
  margin-bottom: 2%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
}

/* 图片样式 */
.img-container img {
  display: block;
  width: 100%;
}

/* 标题样式 */
.img-container p {
  font-size: 20px;
  text-align: center;
  margin: 10px 0;
}

Dalam kod di atas, kami telah membuat beberapa pelarasan reka letak dan gaya pada bekas grid empat segi empat dan bekas imej untuk menjadikannya memenuhi keperluan empat segi empat. grid. Pada masa yang sama, kami juga membuat beberapa tetapan penggayaan asas untuk imej dan tajuk.

Kebaikan dan keburukan menggunakan JavaScript untuk melaksanakan susun atur grid empat persegi

Berbanding dengan menggunakan HTML dan CSS untuk melaksanakan secara langsung susun atur grid empat persegi, kelebihan menggunakan JavaScript ialah ia boleh dilaksanakan dengan lebih fleksibel Ciri lanjutan. Contohnya, kami boleh menambah atau memadam blok gambar pada halaman berdasarkan operasi pengguna, atau melaksanakan reka letak aliran air terjun pada halaman, dsb.

Walau bagaimanapun, menggunakan JavaScript untuk melaksanakan reka letak grid empat segi empat juga mempunyai beberapa kelemahan. Pertama, ia memerlukan usaha pengaturcaraan tambahan dan mungkin sukar untuk pemula. Kedua, disebabkan keperluan untuk menjana kod HTML secara dinamik, kelajuan memuatkan halaman mungkin lebih perlahan.

Kesimpulan

Menggunakan JavaScript untuk melaksanakan reka letak grid empat segi empat boleh memberikan kami lebih fleksibiliti dan kebolehskalaan, tetapi pada masa yang sama, kami perlu memberi perhatian kepada kekurangan dan kesan prestasinya. Untuk pembangun bahagian hadapan, mereka harus memilih kaedah pelaksanaan yang paling sesuai dengan mereka berdasarkan situasi tertentu.

Atas ialah kandungan terperinci JavaScript melaksanakan grid empat persegi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!