[代码样式]jQuery随机及响应式画廊插件least.js

简介

least.js 是一个基于 jQuery 的画廊插件，当刷新页面的时候，缩略图会随机排列。同时它还是响应式设计，能够自动适应窗口大小。

兼容性

least.js 使用了 HTML5 和 CSS3，所以不兼容 IE6、IE7，其他浏览器正常。

使用方法

引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/least.min.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/least.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.lazyload.js"></script>

HTML

<section>
    <ul id="gallery">
        <li id="fullPreview"></li>
        <li>
            <a href="https://www.dowebok.com/img/full/1.jpg" rel="external nofollow" ></a>
            <img data-original="https://www.dowebok.com/img/thumb/1.jpg" src="https://www.dowebok.com/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="https://www.dowebok.com/img/full/2.jpg" rel="external nofollow" ></a>
            <img data-original="https://www.dowebok.com/img/thumb/2.jpg" src="https://www.dowebok.com/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();
});

参数

百度网盘" name="jQuery随机及响应式画廊插件least.js" pass="" code=""]