(聽學長說最近前端面試喜歡問這個，轉來學習下，其實自己也看得不是很懂，慢慢研究。原文)
之前有寫過一篇非等寬列表的布局的博文，那只是這種布局之前的叫法，為了和常規的等寬瀑布流布局做區分，根據這種布局的特性（整行是等高的），那麼就叫等高瀑布流布局吧。
怎麼又拿這種布局出來說事？最近幾天在對以前開發的360搜尋結果列表頁的尺寸和互動效果做一些細節上的調整。同時也對布局的演算法做了優化，之前採用的是以寬度裁切為主和夾雜著一些等比縮放的演算法，當時是為了讓每一行看起來高度都一致。由於寬度裁切的效果會讓左右邊緣部分有損失，而且當時也有 hover 時的放大效果在一定程度上彌補了這種損失。這次放棄了寬度裁切，也去掉了 hover 時放大的效果，全部採用了等比縮放的演算法。
好吧，上面的廢話扯了一堆，下面就直奔主題吧，基本的布局方式並沒有變，有疑問的可以看之前的博文。
這是最關鍵的一點，如果本身不是定高的，像 google+ 相簿那樣，那麼需要先將整行都先縮放到同乙個固定的高度，可以先使用整行中最小高度的為初次的基準高度。如果本身就是等高的，那麼就直接省卻了這一步。
基準高度 = 縮放後的總寬度 / 縮放前的總寬度 * 原圖高度
有了基準高度，一切都好辦了。
高度的縮放比 = 基準高度 / 原圖高度
縮放後的寬度 = 高度的縮放比 * 原圖寬度
大功告成了？只差最後一步了，那就是誤差的處理。在計算的過程，由於的寬高都是取整的，難免會出現誤差，可以將誤差疊加到整行中最小或最大寬度的上再次對進行一些縮放，這個時候就需要一點點的裁切了。
至此，等高瀑布流布局的等比縮放的演算法都介紹完畢了，是的，就是這麼簡單。
瀑布流布局（等寬不等高jQuery）
body div id main div class box div class pic img src picture 1.png div div div class box div class pic img src picture 2.png div div div class box div...
瀑布流布局
最近在看瀑布流布局，覺得很神奇，每個模組都可以找到自己應該在的地方，各列齊頭並進，給人一種很high的感覺。一開始自己也想了思路 模組1，模組2，裡面模組float left。結果試了一下，悲劇啊，不同高度的直接就掛了，布局亂了。等高的還可以。然後我又想分類，就是規定幾列，分別把模組順序載入在各個c...
瀑布流布局
很早以前我就想自己學寫一下瀑布流布局，可是由於懶神來找我聊天咯，所以推遲咯很久直到今天我才來寫瀑布流布局。由於鄙人的js還有很大的提公升空間，所以我是先看咯一下那些大神的具體講解和分析，然後才開始著手寫的，收穫那是槓槓的。1 大家都知道要想實現瀑布流，就必須規定每乙個區塊的寬度要一致 2 確定每一排...