響應式畫廊Gallery插件-Justified-Gallery

這個jQuery插件允許你在一個合理的空間內創建響應式、無限滾動、高品質的畫廊，并填充滿所有的空間。

對于制作網站的人來說，一個常見的問題就是使用各種尺寸和寬高比的圖像來創建一個優雅的畫廊，Flickr 和 Google+對于這方面的處理非常的棒，這個插件的目的就是使用一種新的快速的算法來幫你解決這個問題。

插件主要特性

• 無需在意像素：使用一種先進的算法無需剪裁圖像進行自動調整
• 無限滾動：已經為圖片無限加載做好準備，只需添加圖片并告訴Justified Gallery
• 高質量：支持任何設備和屏幕尺寸
• 動態畫廊：過濾、排序、隨機、添加、刪除圖像，你可以對畫廊進行任何操作
• 燈箱效果一體化：你可以使用現有的燈箱效果，如Colorbox 或 Swipebox
• 高度可定制化：提供很多選擇供你打造你想要的畫廊效果
• Captions：可以給你的圖片添加說明文字
• 響應式：可根據屏幕尺寸自動調整大小
• 快速設計：帶有智能的縮略圖加載，生而很快
• 錯誤處理：管理服務器的錯誤，自動跳過不可用圖像，并在控制臺給出提示

如何使用

Justified Gallery接受固定格式的畫廊：每一個a鏈接中包含一個縮略圖，而鏈接指向原始圖片：

<div id="mygallery" >
    <a href="path/to/myimage1_original.jpg">
        <img alt="Title 1" src="path/to/myimage1_thumbnail.jpg"/>
    </a>
    <a href="path/to/myimage2_original.jpg">
        <img alt="Title 2" src="path/to/myimage2_thumbnail.jpg"/>
    </a>
    <!-- other images... -->
</div>

當然，它也接受 其他格式 ，適應你不同的需求。

插件需要jQuery支持，之后還需引入插件的文件：

<link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.justifiedGallery.js"></script>

現在你只需調用即可，它會使用默認參數調整你的圖像：

$("#mygallery").justifiedGallery();

更多使用請參考其 使用文檔 。

項目 Github 地址： https://github.com/miromannino/Justified-Gallery