HTML、CSS、および jQuery: 画像タイルレイアウトを実装するための技術ガイド-jsチュートリアル-php.cn

HTML、CSS、および jQuery: 画像タイルレイアウトを実装するための技術ガイド

PHPz

リリース： 2023-10-25 10:36:14

オリジナル

1050 人が閲覧しました

HTML、CSS、および jQuery: 画像タイルレイアウトを実装するための技術ガイド

HTML、CSS、および jQuery: 画像タイルレイアウトを実装するためのテクニカルガイド

要約: この記事では、HTML、CSS、および jQuery を使用して画像タイルレイアウトを実装する方法を紹介します。。これらのテクニックを使用すると、グラフィックアートワーク、製品画像、またはタイリングが必要なその他の画像を紹介する、美しくプロフェッショナルな Web レイアウトを作成できます。この記事では、詳細な技術ガイドと、独自の画像タイルレイアウトの作成を開始するのに役立つ具体的なコード例を提供します。

HTML レイアウト

まず、画像を収容するための基本的な HTML レイアウトを作成する必要があります。この例では、div コンテナを使用してすべての画像を含めます。ニーズに合わせて変更および調整できます。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.container img {
    width: 200px;
    height: 200px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="container">
    <!--在这里插入您的图片-->
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
    <img src="image5.jpg" alt="Image 5">
    <img src="image6.jpg" alt="Image 6">
</div>
</body>
</html>

ログイン後にコピー

上記のコードでは、container クラスで div コンテナを作成し、CSS の display: flex プロパティを使用してそれをフレックスコンテナにします。 flex-wrap:wrap 属性により、ページ幅の変化に適応するために画像がコンテナ内で自動的に折り返されます。

CSS スタイル

上記の HTML コードでは、すべての画像に適用される CSS スタイルも定義します。この例では、画像が希望通りに並ぶように、画像の幅、高さ、余白を設定します。ニーズに応じてカスタマイズできます。

.container img {
    width: 200px;
    height: 200px;
    margin: 10px;
}

ログイン後にコピー

jQuery タイルレイアウト

ここでは、jQuery を使用してタイルレイアウトを実装する方法を紹介します。まず、Web ページに jQuery ライブラリへのリンクを追加する必要があります。最新バージョンの jQuery ライブラリを公式 Web サイト (https://jquery.com/) からダウンロードして、HTML ファイルにリンクできます。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.container img {
    width: 200px;
    height: 200px;
    margin: 10px;
}
</style>
<script>
$(document).ready(function(){
    // 获取容器和图片对象
    var container = $(".container");
    var images = container.find("img");

    // 将图片按照平铺方式排列
    function tileLayout() {
        var containerWidth = container.width();
        var imageWidth = images.eq(0).outerWidth() + 20; // 加上外边距

        var numPerRow = Math.floor(containerWidth / imageWidth);

        for (var i = 0; i < images.length; i += numPerRow) {
            images.slice(i, i + numPerRow).wrapAll('<div class="row"></div>');
        }
    }

    // 页面加载完成后进行排列
    tileLayout();

    // 窗口大小改变时重新排列
    $(window).resize(function(){
        container.find(".row").unwrap();
        tileLayout();
    });
});
</script>
</head>
<body>
<div class="container">
    <!--在这里插入您的图片-->
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
    <img src="image5.jpg" alt="Image 5">
    <img src="image6.jpg" alt="Image 6">
</div>
</body>
</html>

ログイン後にコピー

上記のコードでは、jQuery のドキュメント準備イベント $(document).ready(function(){}) を使用して、コードを実行する前にページが完全に読み込まれていることを確認します。まず、コンテナーと画像オブジェクトを取得し、tileLayout() という名前の関数を定義しました。この関数は、画像を <div> 要素でタイル状にラップするために使用されます。 <p>ページが読み込まれた後、最初に <code>tileLayout() 関数を呼び出してレイアウトを実行します。次に、$(window).resize() イベントを使用して、ブラウザーウィンドウのサイズが変更されたときに画像を再配置します。

概要:

HTML、CSS、jQuery を使用すると、画像タイルレイアウトを簡単に実装できます。 HTML の <div> コンテナと CSS の <code>display: flex プロパティを使用すると、自動的に適応するレイアウトを作成できます。 jQuery といくつかの単純な JavaScript コードを使用すると、ページの幅に基づいて画像のレイアウトを動的に調整できます。この記事が画像タイルレイアウトの実装に役立つことを願っています。