Google+樣式圖片庫

Question

我試圖列舉以下內容：

有什么想法嗎？ 基本上所有照片都具有相同的高度，並且照片會動態排列/裁剪/調整大小以完美地適合行，因此左右兩側都不會有鋸齒狀。 如果您調整瀏覽器窗口的大小，它也會調整照片的大小以適合。 我曾經嘗試過同位素和jQuery砌體，但都沒有給我這種效果。

Answer 1

在這種情況下，流體網格系統將為您提供幫助： http : //twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

Answer 2

我只是實現了這一點。 這是我的操作方式：

1. 當頁面加載時，我測量目標容器（我的圖像將在其中生存的容器）的可用寬度，並將其稱為maxWidth
2. 我進行了AJAX調用，將maxWidth傳遞給服務器
3. 我確定要顯示在服務器上的畫廊圖像列表，並逐一處理
4. 在列表的迭代過程中，我一直在向行添加圖像，該行的長度為可用的maxWidth（我向上傳遞的）。 圖像溢出maxWidth后，我將計算溢出量
5. 我將溢出量除以我行中圖像的數量，然后減去該行中每張圖像的值（這樣一幅圖像的寬度不會減小太多）
6. 我為每一行重復此操作，因此每一行加起來恰好是maxWidth

我必須考慮的一些事情：

1. 我必須考慮到每張圖像之間所需的頁邊距寬度，並在處理每一行時將其作為maxWidth累積值的因素。
2. 我們需要一個角標記圖像（一個更大的圖像，並固定在左上角。該圖像包含兩行，並且比其他縮略圖寬。因此，我必須為前兩行計算不同的maxWidth 。
3. 調整瀏覽器大小時，我不得不重新計算尺寸。 綁定到窗口的resize事件會導致在拖動過程中調用多個AJAX。 我必須修復resize事件，以便僅在完成后才觸發。

總體而言，圖庫的表現非常好。 他是截圖。