當照片尺寸不同時，如何顯示照片牆

我打算展示'照片牆'。問題是所有照片都有不同的尺寸和方向（風景/人像）。例如，當您在網站上搜索照片時，您會注意到我想要實現的設置。（http://www.dreamstime.com/photos-images/programming.html）。 Google圖片搜索與此類似。當照片尺寸不同時，如何顯示照片牆

我的問題是：這是如何完成的？有沒有jQuery插件？或者，我是否需要獲取所有維度，然後使用遞歸函數將它放在1行中？或者1張圖片是否具有多個維度以便最適合（排序時）？

來源

2014-09-29 RayK

[看看jQuery砌體]（http://masonry.desandro.com/） – Ohgodwhy 2014-09-29 07:37:20

Google圖片和您的示例都將同一高度的所有圖片放在同一高度，這很容易實現。我想你真正想要的是一種方法，將不同寬度的圖像整齊地放置在網格中，並將其放置在高度爲和之間。如果是這樣，請檢查Masonry。

來源

2014-09-29 07:37:39 OrionMelt

最後，謝謝！我一直在尋找這個很長一段時間。但是，當我確實需要相同的高度時，實現該目標的最佳方法是什麼？將所有維度存儲在數據庫中並讓PHP腳本確定最佳順序？或者還有一個Jquery插件嗎？ – RayK 2014-09-29 07:48:35

砌體工程也適用於相同高度的圖像。您可能還想查看[Packery]（http://packery.metafizzy.co/）和[Isotope]（http://isotope.metafizzy.co/）（由同一作者），但只有Masonry在MIT許可證。其他人僅供個人使用。 – OrionMelt 2014-09-29 07:57:05

加載圖片500 X 500像素是一個壞主意，當你想顯示它200×200像素。我woulud建議是

你的PHP服務器的飛行裁剪圖像，然後服務於優化的圖像。你可以使用像imagick http://www.imagemagick.org/這樣的庫來完成你的工作。
如果你有一個功能，當用戶點擊小圖像時你想顯示一個更大的圖像，然後使用jQuery和其他庫在點擊時使用ajax獲取全尺寸圖像。

關於如何使用imagick裁剪圖像，你會在stackoverflow上找到很多答案。

快樂編碼。

來源

2014-09-29 13:52:32

當照片尺寸不同時，如何顯示照片牆

回答

相關問題