Melaksanakan kesan aliran air terjun imej berdasarkan JavaScript

Mencapai kesan aliran air terjun bagi imej berdasarkan JavaScript

Reka letak aliran air terjun ialah cara biasa untuk memaparkan imej pada halaman web Ia membolehkan imej dipaparkan dalam cara yang mengalir, memberikan kesan visual yang unik. Dalam artikel ini, kami akan menggunakan JavaScript untuk melaksanakan kesan air terjun imej mudah.

1. Persediaan
   Pertama, kita perlu menyediakan beberapa sumber imej. Anda boleh memuat turun beberapa imej secara manual dan meletakkannya dalam folder, supaya kami boleh terus menggunakan laluan imej ini dalam kod.
2. Struktur HTML
   Kita perlu mencipta elemen bekas dalam HTML terlebih dahulu untuk memaparkan imej. Anda boleh menggunakan elemen div sebagai bekas dan tetapkan id atau kelas untuk mengenal pastinya.

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

3. Gaya CSS
   Untuk mencapai kesan air terjun, kita perlu menggunakan CSS untuk menggayakan elemen dan imej bekas. Anda boleh menetapkan lebar dan bilangan lajur elemen bekas, serta jarak setiap lajur. Pada masa yang sama, anda juga boleh menetapkan lebar gambar dan menetapkan atribut kedudukan gambar kepada mutlak supaya gambar boleh diletakkan dengan bebas.

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

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

4. Pelaksanaan kod JavaScript
   Seterusnya, kami akan menggunakan JavaScript untuk melaksanakan kesan aliran air terjun. Pertama, kita perlu mendapatkan elemen kontena dan semua sumber imej.

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

Kemudian, kita perlu mencipta tatasusunan untuk memegang ketinggian setiap lajur.

var columnHeights = [];

Seterusnya, kita boleh mengulangi semua sumber imej, mencipta elemen img untuk setiap imej dan menambahkannya pada elemen bekas. Pada masa yang sama, kita perlu mengira di mana setiap imej harus diletakkan.

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. Kod lengkap
   Berikut adalah kod lengkap untuk mencapai kesan aliran air terjun gambar:

  
  


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

Melalui kod di atas, kami berjaya melaksanakan kesan aliran air terjun yang mudah bagi gambar. Dalam projek sebenar, pengubahsuaian gaya yang lebih kompleks dan fungsi interaktif boleh ditambah pada susun atur aliran air terjun mengikut keperluan.

Atas ialah kandungan terperinci Melaksanakan kesan aliran air terjun imej berdasarkan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!