網頁上的攝影展:等高響應布局來實現

標籤：style   c   blog   tar   http   a   

「等高響應式布局」是什嗎？介紹它之前，我們先回憶一下它的近親「等寬響應式瀑布流」。

回憶一下，Pinterest、Google+、花瓣網、美麗說等是否讓你沉浸於不斷往下拉體驗豐富的圖片閱覽？

那種感覺就像逛街，讓所有商品呈現在網頁上，只需要往下拉滑鼠就能逐個瀏覽，不斷載入，他們簡潔同時整齊，原因是他們的寬度相等，但是高度不一。

這就是所謂的「等寬響應式瀑布流」，它的特點如下：

1.響應式設計，適應PC端以及移動端各裝置呈現不同的寬度和單列數量；

2.等寬，這樣的布局十分適合瀑布流，有不斷向下的閱讀感；

3.沒有腳的小鳥，因為內容是不斷向下載入，因此頁尾基本是看不到了；

這樣的布局引起了一個風潮，然而把圖片適應到等寬，高度等比例變化，對不考慮容器高度的瀏覽來說實現並不難，因此業界也大多採用了這樣的布局，而且可以響應式，在不同螢幕寬度可以變化不同卡片寬度。

然而，迴歸正題，今天要說的和這個不同，但是相近，它就是「等高響應式布局」。

先看看：

，並不像等寬一樣簡單，要在不改變圖片解析度(寬高比)同時保持等高且佔滿行寬度，如何?？不妨帶著問題跟我走。

1 等高響應式布局是什嗎？

①行內高度相等；

②行間總寬度相等；

③自適應寬度布局；

④圖片解析度（寬高比）不變；

2 難在那裡？

①行內高度一致，行間高度不一致，但是相差不能太多；

②並不知道一行需要多少個圖片才能佔滿寬度，由於高度不確定，圖片的寬度也不能等比變化；

③如何做到自適應？

④布局用於使用者的個人相簿，資料量是有限且未知的，如何保證圖片數量滿行顯示？

由上可知，這種布局涉及太多變數，而且最難的是做到圖片解析度不改變，不影響圖片品質效果。