JavaScriptをベースにした画像の滝の流れ効果の実装

JavaScript に基づいた画像のウォーターフォール フロー効果の実装

ウォーターフォール フロー レイアウトは、Web ページに画像を表示する一般的な方法です。画像が流れ込むようにすることができます。流れるようなディスプレイで、人々にユニークな視覚効果を与えます。この記事では、JavaScript を使用して、単純な画像のウォーターフォール効果を実装します。

1. 準備
   まず、いくつかの画像リソースを準備する必要があります。いくつかの画像を手動でダウンロードしてフォルダーに配置すると、コード内でこれらの画像のパスを直接使用できます。
2. HTML 構造
   まず、画像を表示するために HTML でコンテナー要素を作成する必要があります。 div 要素をコンテナとして使用し、それを識別するための ID またはクラスを設定できます。

<div id="gallery"></div>

3. CSS スタイル
   滝の流れの効果を実現するには、CSS を使用してコンテナ要素と画像のスタイルを設定する必要があります。コンテナ要素の幅と列数、および各列の間隔を設定できます。同時に、画像の幅を設定し、画像の位置属性を絶対に設定して、画像を自由に配置することもできます。

#gallery {
  width: 1000px;
  column-count: 4;
  column-gap: 20px;
}

#gallery img {
  width: 100%;
  position: absolute;
}

4. JavaScript コードの実装
   次に、JavaScript を使用して滝の流れの効果を実現します。まず、コンテナ要素とすべての画像リソースを取得する必要があります。

var container = document.getElementById('gallery');
var images = [
  'path_to_image1',
  'path_to_image2',
  'path_to_image3',
  // ...
];

次に、各列の高さを保存するための配列を作成する必要があります。

var columnHeights = [];

次に、すべての画像リソースを走査し、画像ごとに img 要素を作成し、それをコンテナ要素に追加します。同時に、各画像をどこに配置するかを計算する必要があります。

images.forEach(function(image) {
  // 创建 img 元素
  var img = new Image();
  img.src = image;
  
  // 计算图片应放置的位置
  var columnIndex = 0;
  var minHeight = columnHeights[0];
  
  for(var i = 1; i < columnHeights.length; i++) {
    if(columnHeights[i] < minHeight) {
      columnIndex = i;
      minHeight = columnHeights[i];
    }
  }
  
  var left = columnIndex * (img.width + 20);
  var top = minHeight;
  
  // 设置图片位置
  img.style.left = left + 'px';
  img.style.top = top + 'px';
  
  // 更新列高度
  columnHeights[columnIndex] = top + img.height + 20;
  
  // 将图片添加到容器元素中
  container.appendChild(img);
});

5. 完全なコード
   以下は、画像のウォーターフォール効果を実現するための完全なコードです:

  
  


  <div id="gallery"></div>

  <script>
    var container = document.getElementById('gallery');
    var images = [
      'path_to_image1',
      'path_to_image2',
      'path_to_image3',
      // ...
    ];

    var columnHeights = [];

    images.forEach(function(image) {
      var img = new Image();
      img.src = image;
      
      var columnIndex = 0;
      var minHeight = columnHeights[0];
      
      for(var i = 1; i < columnHeights.length; i++) {
        if(columnHeights[i] < minHeight) {
          columnIndex = i;
          minHeight = columnHeights[i];
        }
      }
      
      var left = columnIndex * (img.width + 20);
      var top = minHeight;
      
      img.style.left = left + 'px';
      img.style.top = top + 'px';
      
      columnHeights[columnIndex] = top + img.height + 20;

      container.appendChild(img);
    });
  </script>

上記のコードにより、単純な画像のウォーターフォールを正常に実装できました。フロー効果。実際のプロジェクトでは、必要に応じて、より複雑なスタイルの変更やインタラクティブな機能をウォーターフォール フロー レイアウトに追加できます。

以上がJavaScriptをベースにした画像の滝の流れ効果の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。