基於JavaScript實現圖片瀑布流效果-js教程-PHP中文網

基於JavaScript實現圖片瀑布流效果

基於JavaScript實作圖片瀑布流效果

瀑布流佈局是一種在網頁上展示圖片的常見方式，它可以讓圖片以一種流動的方式展示，給人一種獨特的視覺效果。在本文中，我們將使用JavaScript來實作一個簡單的圖片瀑布流效果。

準備工作
首先，我們需要準備一些圖片資源。可以手動下載一些圖片，並將它們放在一個資料夾中，這樣我們在程式碼中就可以直接使用這些圖片的路徑了。
HTML 結構
我們需要先在 HTML 中建立一個容器元素，用來展示圖片。可以使用一個 div 元素作為容器，設定一個 id 或 class 來識別它。

登入後複製

CSS 樣式
為了實現瀑布流效果，我們需要使用 CSS 來設定容器元素以及圖片的樣式。可以設定容器元素的寬度和列數，以及每一列的間距。同時，也可以為圖片設定寬度，並且設定圖片的 position 屬性為 absolute，以便讓圖片可以自由定位。

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

登入後複製