內容
原生的瀑布流思路分析以及具體實作
屢屢思路
①：何為瀑布流：
②：需求：圖片不變形、展示區域不留白
③：需求分析：圖片都遵循等寬不等高的樣式
注意：第一排圖片可不做處理（讓css 操作其樣式），從第二排開始，每張圖片都需要遍歷追加，追加的位置是每一次高度最低的位置（凹陷處，
示例實作
js 代碼塊（保姆級注釋）
window.addEventListener('load', () => {
var boxWidth = document.querySelector('.box').offsetWidth; // # 求出一個盒子的寬度（offsetWidth 回傳值包括 padding）
var containerWidth = document.querySelector('.container').offsetWidth; // # 求出父容器的寬度
var col = parseInt(containerWidth / boxWidth) //# 求出一排有幾列
var boxs = document.querySelectorAll('.box'); //# 拿到所有的盒子，優化計算
var heightArr = []; //# 定義空陣列，來裝每一排圖片的高度
boxs.forEach((item, index) => { //# 遍歷所有盒子
if (index < col) {
heightArr[index] = item.offsetHeight; //# 如果是第一排，直接排序（不定位），且每一次回圈把圖片高度裝入陣列
} else {
var minHeightBox = Math.min(...heightArr); //# 求出一排中最小高度的圖片（每次追加圖片至最小高度下）
var minHeightIndex = heightArr.findIndex(item => item == minHeightBox); //# 找出最小高度圖片的索引
item.style.position = 'absolute'; //# 從第二排起，每張圖片都要定位追加
item.style.top = minHeightBox + 'px'; //# 距頂部等于最小圖片的高度
item.style.left = minHeightIndex * boxWidth + 'px'; // # 距左側等于最小圖片的索引 * 每個盒子的寬度（切記盒子等寬不等高）
heightArr[minHeightIndex] += item.offsetHeight; //# 圖片加入后，把其高度追加入陣列，確保后續追加
}
})
})
對于css 演示，自愧丑的不行，就不展示了哈，
小技巧：扣代碼時可以列印出瀏覽器視窗的實時大小，方便計算，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/96698.html
標籤：AI
上一篇：Scrapy快速入門系列(2) | 簡單一文教你學會如何安裝Scrapy并創建專案(超級詳細哦！)
下一篇：頁面布局產生高度塌陷解決方法