Implementing image waterfall flow effect based on JavaScript

Implementing the waterfall flow effect of images based on JavaScript

Waterfall flow layout is a common way to display images on a web page. It can make the images flow in a flowing way. display, giving people a unique visual effect. In this article, we will use JavaScript to implement a simple image waterfall effect.

1. Preparation
   First, we need to prepare some image resources. You can manually download some images and put them in a folder, so that we can directly use the paths of these images in the code.
2. HTML structure
   We need to first create a container element in HTML to display images. You can use a div element as a container and set an id or class to identify it.

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

3. CSS Style
   In order to achieve the waterfall flow effect, we need to use CSS to style the container elements and images. You can set the width and number of columns of the container element, as well as the spacing of each column. At the same time, you can also set the width of the picture and set the position attribute of the picture to absolute so that the picture can be positioned freely.

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

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

4. JavaScript code implementation
   Next, we will use JavaScript to achieve the waterfall flow effect. First, we need to get the container element and all image resources.

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

Then, we need to create an array to save the height of each column.

var columnHeights = [];

Next, we can traverse all image resources, create an img element for each image, and add it to the container element. At the same time, we need to calculate where each image should be placed.

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. Complete code
   The following is the complete code to achieve the picture waterfall effect:

  
  



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

Through the above code, we successfully implemented a simple picture waterfall flow effect. In actual projects, more complex style modifications and interactive functions can be added to the waterfall flow layout according to needs.

The above is the detailed content of Implementing image waterfall flow effect based on JavaScript. For more information, please follow other related articles on the PHP Chinese website!