JavaScript は 4 つの正方形グリッドを実装します

Web 開発では、画像やコンテンツを列に表示する必要がよくありますが、よく使用される方法の 1 つが 4 マ​​スのグリッド レイアウトです。この記事では、JavaScriptを使用してシンプルな4マスグリッドレイアウトを実装する方法を紹介します。

四功グリッドとは何ですか?

4 正方形グリッドは、一般的に使用される Web ページのレイアウト方法であり、ページ全体を 4 つの等しい領域に分割し、各領域には画像またはコンテンツが含まれます。 4 つの正方形のグリッド レイアウトにより、ページのコンテンツが適切に分離され、ページが乱雑に見えるのを防ぐことができます。

4マスグリッドを実現するにはどうすればよいでしょうか?

HTML と CSS を使用して 4 マスグリッドを実装できますが、ここでは JavaScript を使用して実現します。 4 マスグリッドの実装プロセスは 2 つのステップに分けることができます: まず HTML コードを生成してページに追加し、次に CSS を使用して生成されたコードのレイアウトとスタイルを調整します。

Generate HTML code

JavaScript を使用して HTML コードを動的に生成できます。具体的な実装コードは次のとおりです:

// 获取四宫格容器元素
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);
}

上記のコードでは、まず 4 つのコードを取得します。 -square グリッド コンテナ要素 、次に画像アドレス配列とタイトル配列を定義します。ループ内では、createElement メソッドを使用してイメージ コンテナー要素、イメージ要素、タイトル要素をそれぞれ作成し、対応する親要素に追加します。

CSS レイアウトとスタイルの使用

次に、CSS を使用して、動的に生成された HTML コードのレイアウトとスタイルを調整する必要があります。具体的な実装コードは次のとおりです。

/* 四宫格容器样式 */
#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;
}

上記のコードでは、4 つの正方形のグリッド コンテナーとピクチャー コンテナーにレイアウトとスタイルの調整を加えて、4 つの正方形の要件を満たすようにしました。グリッド。同時に、画像とタイトルの基本的なスタイル設定もいくつか行いました。

JavaScript を使用して 4 マスグリッド レイアウトを実装するメリットとデメリット

HTML と CSS を使用して 4 マス グリッド レイアウトを直接実装する場合と比較して、JavaScript を使用して実装するメリットそれは、より柔軟に高度な機能を実装できることです。例えば、ユーザーの操作に応じてページ上の画像ブロックを追加・削除したり、ページ上にウォーターフォールフローのレイアウトを実装したりすることができます。

ただし、JavaScript を使用して 4 正方形グリッド レイアウトを実装することには、いくつかの欠点もあります。まず、追加のプログラミング作業が必要であり、初心者にとっては難しいかもしれません。次に、HTML コードを動的に生成する必要があるため、ページの読み込み速度が遅くなる可能性があります。

結論

JavaScript を使用して 4 正方形グリッド レイアウトを実装すると、柔軟性とスケーラビリティが向上しますが、同時に、その欠点とパフォーマンスへの影響に注意する必要があります。フロントエンド開発者は、特定の状況に基づいて最適な実装方法を選択する必要があります。

以上がJavaScript は 4 つの正方形グリッドを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。