자바스크립트 기반의 이미지 워터폴 플로우 효과 구현-JS 튜토리얼-php.cn

자바스크립트 기반의 이미지 워터폴 플로우 효과 구현

王林

풀어 주다： 2023-08-09 16:13:27

원래의

1123명이 탐색했습니다.

자바스크립트 기반의 이미지 워터폴 플로우 효과 구현

JavaScript를 기반으로 이미지의 폭포 흐름 효과 구현

폭포 흐름 레이아웃은 웹 페이지에 이미지를 표시하는 일반적인 방법으로 이미지를 흐르는 방식으로 표시하여 사람들에게 독특한 시각적 효과를 제공합니다. 이 글에서는 JavaScript를 사용하여 간단한 이미지 폭포 효과를 구현해 보겠습니다.

준비
먼저 이미지 리소스를 준비해야 합니다. 일부 이미지를 수동으로 다운로드하여 폴더에 넣을 수 있으므로 코드에서 이러한 이미지의 경로를 직접 사용할 수 있습니다.
HTML 구조
이미지를 표시하려면 먼저 HTML에서 컨테이너 요소를 만들어야 합니다. div 요소를 컨테이너로 사용하고 이를 식별하기 위해 ID 또는 클래스를 설정할 수 있습니다.

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

로그인 후 복사

CSS 스타일
폭포 효과를 얻으려면 CSS를 사용하여 컨테이너 요소와 이미지의 스타일을 지정해야 합니다. 컨테이너 요소의 열 너비와 개수는 물론 각 열의 간격도 설정할 수 있습니다. 동시에 그림의 너비를 설정하고 그림의 위치 속성을 절대값으로 설정하여 그림의 위치를 자유롭게 지정할 수도 있습니다.

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

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

로그인 후 복사

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);
});

로그인 후 복사

전체 코드
다음은 그림의 폭포 흐름 효과를 구현하는 전체 코드입니다.




  图片瀑布流效果
  



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

로그인 후 복사

위 코드를 통해 간단한 그림의 폭포 흐름 효과를 성공적으로 구현했습니다. 실제 프로젝트에서는 필요에 따라 더 복잡한 스타일 수정과 대화형 기능을 폭포 흐름 레이아웃에 추가할 수 있습니다.

위 내용은 자바스크립트 기반의 이미지 워터폴 플로우 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!