懶加載

大家可以想想，如果有一個圖片分享類的網(wǎng)站，里面的圖片成千上萬，要是用戶一打開頁面時，這些圖片都同時加載的話，不僅浪費很多很多的流量，畢竟不是所有圖片都是用戶想看的，而且還會有很長的等待時間，這樣的用戶體驗是極其糟糕的。

所以我們需要去判斷這些圖片是否出現(xiàn)在用戶的可視范圍內(nèi)，如果出現(xiàn)了就去加載，如果沒有出現(xiàn)就不加載，這種方法就叫做懶加載。

懶加載的思路

1、我們需要給圖片標簽的 src 屬性置空，這樣就沒有圖片在頁面打開的時候加載。

2、我們需要獲取整個可視窗口的高度和滾動的距離以及標簽的所在位置。如果標簽的位置小于窗口的高度加上滾動的距離，說明該標簽在用戶的可視范圍內(nèi)了。

3、檢查圖片是否加載過，如果沒有的話就手動添加一個自定義屬性來給與資源地址，加載該圖片。

瀑布流布局

瀑布流布局是 Pinterest 網(wǎng)站首創(chuàng)，效果如圖所示：

圖一

——————————截圖取自花瓣網(wǎng)

瀑布流布局原理

多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，根據(jù)圖片原比例縮放直至寬度達到我們的要求，依次按照規(guī)則放入指定位置。

瀑布流布局實現(xiàn)

在我的 demo 里，其實瀑布流的實現(xiàn)主要是圖片的等寬不等高，那么我們就可以強制每張圖片的寬度，然后進一步去計算第一行能排列多少張圖片并將第一行填滿。接下來就需要根據(jù)每張圖片的已知高度去計算各列中高度最小的那一列，接下來的圖片，就會依次放到高度最小的那一列上（當最小的那列填補上圖片后，最小高度列則換成其他列），如此循環(huán)下去，直至所有元素均能夠按要求排列為止。

當然，實現(xiàn)的方法有多重多樣，這里就不一一舉例，主要的還是靠大家自己去創(chuàng)造。

其中：

1、計算顯示的列數(shù)：頁面寬度/元素寬度 取整 （頁面寬度的話我們用 clientWidth 去獲取）

2、計算最小高度所在列：這里我們采用的是用數(shù)組去存取最開始每列一張圖時每列的高度，從而獲取最小高度所在列，然后添加元素到該列并將添加的元素的高度累加到數(shù)組對應(yīng)列上，這樣的話，我們就可以在每次添加元素的時候獲取到最小高度所在列來添加元素了

3、需要注意的是，由于我們是自定義每張圖片出現(xiàn)在哪一列，那么我們會用定位來做這個事情，那么每當插入一張新圖片的時候 top 和 left 設(shè)置為多少呢？其實很簡單，top 的話設(shè)置為步驟2中獲取到的最小高度即可。而 left 的話，因為我們每列寬度是固定的，那么在我們獲取到最小高度所在列時順便獲取到他的數(shù)組索引的話，那么我們的 left 就可以用索引值*列寬來獲得了，如圖所示：

圖二

木桶布局

查資料才了解，實際上木桶布局是百度前端部門自己起的一個名字。這種布局主要是將所有圖片在保持原本的寬高比的情況下，保證每一行的的所有圖片有相同的高度，相鄰行之間高度不同。如圖所示：

圖三

木桶布局實現(xiàn)思路

1、首先獲取圖片原本的寬高（設(shè)為 Iw,Ih），自己定一個大概的高度（設(shè)為 Xh）。

2、通過寬高比和預(yù)設(shè)的高度，可以計算出一個預(yù)設(shè)的寬度（設(shè)為 Xw）:Xw=(Iw*Xh)/Ih

3、知道了一個預(yù)設(shè)的寬度以后，我們就需要去計算每行能放下多少張圖片，一般是不可能正好放下整數(shù)張圖片的，當?shù)谝恍蟹挪幌聲r，就放在第二行，第一行便會有一些空間剩余。我們再通過計算該行所有圖片寬度和（設(shè)為 XwA）/預(yù)設(shè)高度=總寬度/X 就能算出該行的高度了。公式為：Ch(該行高度)=(Cw(該行寬度)*Xh)/XwA。

代碼的話因為自己也是剛實現(xiàn)，且實現(xiàn)方法較多還沒有一一嘗試，代碼有點亂，所以就不展示了，如果大家有更多更好的實現(xiàn)方法，歡迎分享。

【海說軟件接受各種技術(shù)咨詢及開發(fā)業(yè)務(wù)】

END