如何使用Least.js創建響應式圖像庫?

Tags: 插件, 圖像,

Least.js 是一個基於 jQuery 的畫廊插件,當刷新頁面的時候,縮略圖會隨機排列。同時它還是響應式設計,能夠自動適應窗口大小。

本經驗分享如何使用Least.js創建響應式圖像庫

工具/原料

筆記本電腦或是臺式機

互聯網

Least.js

方法/步驟

通過百度搜索引擎“Least.js”,訪問Least.js官方網站,或者直接輸入網址:如下圖所示。

如何使用Least.js創建響應式圖像庫

下載Least.js最新版本,如下圖所示。

如何使用Least.js創建響應式圖像庫

解壓下載Least.js文件夾,其文件結構以及工程目錄,如下圖所示。

如何使用Least.js創建響應式圖像庫

如何使用Least.js創建響應式圖像庫

引入如下文件

(非必須)

如何使用Least.js創建響應式圖像庫

新建HTML文件,其基本結構如下圖所示。

如何使用Least.js創建響應式圖像庫

Javascript代碼如下所示

$(function() {

$('#gallery').least();

});

Least.js參數,如下圖所示。

如何使用Least.js創建響應式圖像庫

Least.js運行效果,如下圖所示。

如何使用Least.js創建響應式圖像庫

注意事項

least.js依賴JQuery庫,需要先引入JQuery庫。

least.js 使用了 HTML5 和 CSS3,所以不兼容 IE6、IE7,其他瀏覽器正常。

相關問題答案