支持Lazy loading的图片画廊jQuery插件 - Least.js

http://www.sd131.com/cj/least/index.htm

这个插件使用HTML5/CSS3的特性并且支持响应式的布局。

如何使用

插件信息

   

预览图

使用步骤

导入类库

<!-- least.js CSS-file -->
< link  href = "css/least.min.css"  rel = "stylesheet"  />
<!-- jQuery libary -->
< script  src = "http://code.jquery.com/jquery-latest.js"  defer = "defer" ></ script >
<!-- least.js JS-file -->
< script  src = "js/least.min.js"  defer = "defer" ></ script >
<!-- Lazyload JS-file -->
< script  src = "js/jquery.lazyload.js"  defer = "defer" ></ script >

HTML

< section >
    < ul  id = "gallery" >
        < li  id = "fullPreview" ></ li >

        < li >
            < a  href = "img/full/full_1.jpg" ></ a >
            < img  data-original = "img/thumb/thumb_1.jpg"  src = "img/effects/white.gif"  width = "240"  height = "150"  alt = "Ocean"  />

            < div  class = "overLayer" ></ div >
            < div  class = "infoLayer" >
                < ul >
                    < li >
                        < h2 >
                            Ocean
                        </ h2 >
                    </ li >
                    < li >
                        < p >
                            View Picture
                        </ p >
                    </ li >
                </ ul >
            </ div >

            < div  class = "projectInfo" >
                < strong >
                    Monday, 14th April 2093:
                </ strong > sit amet, consetetur sadipscing elitr, sed diam
            </ div >
        </ li >
    </ ul >
</ section >

下载地址