【web前端技術】響應式畫廊Gallery插件-Justified-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>
           

現在你隻需調用即可，它會使用預設參數調整你的圖像：

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

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

源碼國内源：https://gitee.com/Guang_Long_Yu/justified-gallery

一些使用的建議

1. 在一些用到 jQuery 的應用中，建議直接使用本插件來進行圖檔布局。
2. 學習本插件，建議下載下傳我上傳到碼雲的代碼，裡面帶有20多個常用的圖檔布局例子，更加友善入門，也更加容易快速上手。
3. 本插件代碼量較少，建議學習其源碼，對程式設計之路必定大有好處。