基于JavaScript实现图片瀑布流效果-tutorial js-php.cn

基于JavaScript实现图片瀑布流效果

瀑布流布局是一种在网页上展示图片的常见方式，它可以让图片以一种流动的方式展示，给人一种独特的视觉效果。在本文中，我们将使用JavaScript来实现一个简单的图片瀑布流效果。

准备工作
首先，我们需要准备一些图片资源。可以手动下载一些图片，并将它们放在一个文件夹中，这样我们在代码中就可以直接使用这些图片的路径了。
HTML 结构
我们需要先在 HTML 中创建一个容器元素，用来展示图片。可以使用一个 div 元素作为容器，设置一个 id 或者 class 来标识它。

Salin selepas log masuk

CSS 样式
为了实现瀑布流效果，我们需要使用 CSS 来设置容器元素以及图片的样式。可以设置容器元素的宽度和列数，以及每一列的间距。同时，还可以给图片设置宽度，并且设置图片的 position 属性为 absolute，以便让图片可以自由定位。

#gallery { width: 1000px; column-count: 4; column-gap: 20px; } #gallery img { width: 100%; position: absolute; }

Salin selepas log masuk

JavaScript 代码实现
接下来，我们将使用 JavaScript 来实现瀑布流效果。首先，我们需要获取到容器元素，以及所有的图片资源。

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

Salin selepas log masuk

然后，我们需要创建一个数组来保存每一列的高度。

var columnHeights = [];

Salin selepas log masuk

接下来，我们可以遍历所有的图片资源，为每一张图片创建一个 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); });

Salin selepas log masuk