Implémentation d'un effet de flux de cascade d'images basé sur JavaScript

Implémentation de l'effet de flux en cascade des images basées sur JavaScript

La disposition en flux en cascade est un moyen courant d'afficher des images sur des pages Web. Elle permet d'afficher les images de manière fluide, donnant aux gens un effet visuel unique. Dans cet article, nous utiliserons JavaScript pour implémenter un simple effet de cascade d'images.

1. Préparation
   Tout d'abord, nous devons préparer quelques ressources d'images. Vous pouvez télécharger manuellement certaines images et les mettre dans un dossier, afin que nous puissions utiliser directement les chemins de ces images dans le code.
2. Structure HTML
   Nous devons d'abord créer un élément conteneur en HTML pour afficher les images. Vous pouvez utiliser un élément div comme conteneur et définir un identifiant ou une classe pour l'identifier.

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

3. Style CSS
   Afin d'obtenir l'effet cascade, nous devons utiliser CSS pour styliser les éléments et les images du conteneur. Vous pouvez définir la largeur et le nombre de colonnes de l'élément conteneur, ainsi que l'espacement de chaque colonne. Dans le même temps, vous pouvez également définir la largeur de l'image et définir l'attribut de position de l'image sur absolu afin que l'image puisse être positionnée librement.

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

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

4. Implémentation du code JavaScript
   Ensuite, nous utiliserons JavaScript pour implémenter l'effet de flux en cascade. Tout d’abord, nous devons obtenir l’élément conteneur et toutes les ressources d’image.

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

Ensuite, nous devons créer un tableau pour contenir la hauteur de chaque colonne.

var columnHeights = [];

Ensuite, nous pouvons parcourir toutes les ressources d'image, créer un élément img pour chaque image et l'ajouter à l'élément conteneur. Dans le même temps, nous devons calculer où chaque image doit être placée.

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. Code complet
   Ce qui suit est le code complet pour obtenir l'effet de flux de cascade d'images :

  
  



  <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>

Grâce au code ci-dessus, nous avons implémenté avec succès un simple effet de flux de cascade d'images. Dans les projets réels, des modifications de style plus complexes et des fonctions interactives peuvent être ajoutées à la disposition du flux en cascade en fonction des besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!