jQuery隨機及響應式畫廊插件least.js

拉丁傳說 2018-4-13 1299

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

兼容性

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

使用方法

引入文件

<link rel="stylesheet" href="css/least.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/least.min.js"></script>
<script src="js/jquery.lazyload.js"></script>

HTML

<section>
?? ?<ul id="gallery">
?? ??? ?<li id="fullPreview"></li>
?? ??? ?<li>
?? ??? ??? ?<a href="img/full/1.jpg"></a>
?? ??? ??? ?<img data-original="img/thumb/1.jpg" src="img/thumb/1.jpg" alt="Fish">
?? ??? ??? ?<div class="overLayer"></div>
?? ??? ??? ?<div class="infoLayer">
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li><h2>Fish</h2></li>
?? ??? ??? ??? ??? ?<li><p>View Picture</p></li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ??? ?<p class="projectInfo"> <strong>Monday, 14th April 2093:</strong> sit amet, 
?? ??? ??? ??? ?consetetur sadipscing elitr, sed diam nonumy eirmod 
?? ??? ??? ??? ?tempor invidunt ut labore et dolore magna aliquyam erat,
?? ??? ??? ??? ?sed diam voluptua. At vero eos et accusam et justo duo 
?? ??? ??? ??? ?dolores et ea rebum. </p>
?? ??? ?</li>
?? ??? ?<li>
?? ??? ??? ?<a href="img/full/2.jpg"></a>
?? ??? ??? ?<img data-original="img/thumb/2.jpg" src="img/thumb/2.jpg" alt="Golden Gate">
?? ??? ??? ?<div class="overLayer"></div>
?? ??? ??? ?<div class="infoLayer">
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li><h2>New York</h2></li>
?? ??? ??? ??? ??? ?<li><p>View Picture</p></li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ??? ?<p class="projectInfo"> <strong>Monday, 14th April 2093:</strong> sit amet, 
?? ??? ??? ??? ?consetetur sadipscing elitr, sed diam nonumy eirmod 
?? ??? ??? ??? ?tempor invidunt ut labore et dolore magna aliquyam 
?? ??? ??? ??? ?erat, sed diam voluptua. At vero eos et accusam et 
?? ??? ??? ??? ?justo duo dolores et ea rebum. </p>
?? ??? ?</li>
?? ?</ul>
</section>

JavaScript

$(function() {
?? ?$('#gallery').least();
});

參數

參數 類型 說明 默認值
random 布爾值 隨機排列縮略圖 true
lazyload 布爾值 延遲加載圖片 true
scrollToGallery 布爾值 點擊縮略圖時滾動到查看大圖頂部(當頁面高度小于窗口高度時,滾動似乎有 bug) true

演 示 下 載

最新回復 (0)
返回
發新帖
下载麻将游戏四人麻将