懶加載
大家可以想想瓮增，如果有一個(gè)圖片分享類的網(wǎng)站怎棱，里面的圖片成千上萬(wàn)，要是用戶一打開頁(yè)面時(shí)绷跑，這些圖片都同時(shí)加載的話拳恋，不僅浪費(fèi)很多很多的流量，畢竟不是所有圖片都是用戶想看的砸捏，而且還會(huì)有很長(zhǎng)的等待時(shí)間谬运，這樣的用戶體驗(yàn)是極其糟糕的。
所以我們需要去判斷這些圖片是否出現(xiàn)在用戶的可視范圍內(nèi)垦藏，如果出現(xiàn)了就去加載梆暖，如果沒有出現(xiàn)就不加載，這種方法就叫做懶加載掂骏。
懶加載的思路
1轰驳、我們需要給圖片標(biāo)簽的 src 屬性置空，這樣就沒有圖片在頁(yè)面打開的時(shí)候加載弟灼。
2级解、我們需要獲取整個(gè)可視窗口的高度和滾動(dòng)的距離以及標(biāo)簽的所在位置。如果標(biāo)簽的位置小于窗口的高度加上滾動(dòng)的距離田绑，說明該標(biāo)簽在用戶的可視范圍內(nèi)了勤哗。
3、檢查圖片是否加載過掩驱，如果沒有的話就手動(dòng)添加一個(gè)自定義屬性來給與資源地址俺陋，加載該圖片。
瀑布流布局
瀑布流布局是 Pinterest 網(wǎng)站首創(chuàng)昙篙，效果如圖所示：
——————————截圖取自花瓣網(wǎng)
瀑布流布局原理
多行等寬元素排列腊状，后面的元素依次添加到其后，等寬不等高苔可，根據(jù)圖片原比例縮放直至寬度達(dá)到我們的要求缴挖，依次按照規(guī)則放入指定位置。
瀑布流布局實(shí)現(xiàn)
在我的 demo 里焚辅，其實(shí)瀑布流的實(shí)現(xiàn)主要是圖片的等寬不等高映屋，那么我們就可以強(qiáng)制每張圖片的寬度苟鸯，然后進(jìn)一步去計(jì)算第一行能排列多少?gòu)垐D片并將第一行填滿。接下來就需要根據(jù)每張圖片的已知高度去計(jì)算各列中高度最小的那一列棚点，接下來的圖片早处，就會(huì)依次放到高度最小的那一列上（當(dāng)最小的那列填補(bǔ)上圖片后，最小高度列則換成其他列）瘫析，如此循環(huán)下去砌梆，直至所有元素均能夠按要求排列為止。
當(dāng)然贬循，實(shí)現(xiàn)的方法有多重多樣咸包，這里就不一一舉例，主要的還是靠大家自己去創(chuàng)造杖虾。
其中：
1烂瘫、計(jì)算顯示的列數(shù)：頁(yè)面寬度/元素寬度 取整 （頁(yè)面寬度的話我們用 clientWidth 去獲取）
2奇适、計(jì)算最小高度所在列：這里我們采用的是用數(shù)組去存取最開始每列一張圖時(shí)每列的高度坟比，從而獲取最小高度所在列，然后添加元素到該列并將添加的元素的高度累加到數(shù)組對(duì)應(yīng)列上嚷往，這樣的話温算，我們就可以在每次添加元素的時(shí)候獲取到最小高度所在列來添加元素了
3、需要注意的是间影，由于我們是自定義每張圖片出現(xiàn)在哪一列，那么我們會(huì)用定位來做這個(gè)事情茄茁，那么每當(dāng)插入一張新圖片的時(shí)候 top 和 left 設(shè)置為多少呢魂贬？其實(shí)很簡(jiǎn)單，top 的話設(shè)置為步驟2中獲取到的最小高度即可裙顽。而 left 的話付燥，因?yàn)槲覀兠苛袑挾仁枪潭ǖ模敲丛谖覀儷@取到最小高度所在列時(shí)順便獲取到他的數(shù)組索引的話愈犹，那么我們的 left 就可以用索引值*列寬來獲得了键科，如圖所示：
木桶布局
查資料才了解，實(shí)際上木桶布局是百度前端部門自己起的一個(gè)名字漩怎。這種布局主要是將所有圖片在保持原本的寬高比的情況下勋颖，保證每一行的的所有圖片有相同的高度，相鄰行之間高度不同勋锤。如圖所示：
木桶布局實(shí)現(xiàn)思路
1饭玲、首先獲取圖片原本的寬高（設(shè)為 Iw,Ih），自己定一個(gè)大概的高度（設(shè)為 Xh）叁执。
2茄厘、通過寬高比和預(yù)設(shè)的高度矮冬，可以計(jì)算出一個(gè)預(yù)設(shè)的寬度（設(shè)為 Xw）:Xw=(Iw*Xh)/Ih
3、知道了一個(gè)預(yù)設(shè)的寬度以后次哈，我們就需要去計(jì)算每行能放下多少?gòu)垐D片胎署，一般是不可能正好放下整數(shù)張圖片的，當(dāng)?shù)谝恍蟹挪幌聲r(shí)窑滞，就放在第二行琼牧，第一行便會(huì)有一些空間剩余。我們?cè)偻ㄟ^計(jì)算該行所有圖片寬度和（設(shè)為 XwA）/預(yù)設(shè)高度=總寬度/X 就能算出該行的高度了葛假。公式為：Ch(該行高度)=(Cw(該行寬度)*Xh)/XwA障陶。
代碼的話因?yàn)樽约阂彩莿倢?shí)現(xiàn)，且實(shí)現(xiàn)方法較多還沒有一一嘗試聊训，代碼有點(diǎn)亂抱究，所以就不展示了，如果大家有更多更好的實(shí)現(xiàn)方法带斑，歡迎分享鼓寺。
【海說軟件接受各種技術(shù)咨詢及開發(fā)業(yè)務(wù)】
END
