带有LazyLoad的响应式照相馆（least.js）

最新推荐文章于 2024-08-27 07:24:10 发布

cuketao5066

最新推荐文章于 2024-08-27 07:24:10 发布

阅读量115

点赞数

文章标签： java js html css less ViewUI

原文链接：https://www.script-tutorials.com/responsive-photo-gallery-with-lazyload-least-js/

版权

Responsive Photo Gallery with LazyLoad (least.js) Looking for a great responsive photo gallery with lazy load effect, then our new article is for you. During my wanderings on the internet I came across a great plugin least.js. It let you turn a set of photos into a photo gallery which works great even on mobile phones with small screens, moreover lazy load effect lets you to decrease server’s traffic. When you move your mouse over a photo, custom text is displayed. To view the full-size version – need to click on the thumb. I think that this could be ideal for you, because besides of all listed features, its size is only 1kb.

使用LazyLoad的自适应照片库(least.js)寻找具有延迟加载效果的出色的自适应照片库，那么我们的新文章非常适合您。在互联网上徘徊期间，我遇到了一个很棒的插件less.js。它使您可以将一组照片转换为一个相册，即使在具有小屏幕的手机上也可以使用，此外，延迟加载效果还可以减少服务器的流量。将鼠标移到照片上时，将显示自定义文本。要查看完整版，请单击拇指。我认为这对您可能是理想的选择，因为除了列出的所有功能之外，它的大小仅为1kb。

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, let’s download the source files and start coding !

好的，让我们下载源文件并开始编码！

步骤1. HTML (Step 1. HTML)

In the beginning we need to link all the necessary styles and js scripts (in the header section):

首先，我们需要链接所有必需的样式和js脚本(在标题部分)：


    <!-- add styles -->
    <link href="css/least.min.css" rel="stylesheet" type="text/css" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <!-- add scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/least.min.js"></script>
    <script src="js/jquery.lazyload.js"></script>


    <!-- add styles -->
    <link href="css/least.min.css" rel="stylesheet" type="text/css" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <!-- add scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/least.min.js"></script>
    <script src="js/jquery.lazyload.js"></script>

Pay attention, that the latest version of this gallery you can download here. If you want to add the support of mobile devices (small screens), you can easily add this row (in the same header section):

请注意，您可以在此处下载该画廊的最新版本。如果要添加对移动设备(小屏幕)的支持，则可以轻松添加此行(在同一标题部分)：


    <meta content="width=device-width, initial-scale=1" name="viewport" />


    <meta content="width=device-width, initial-scale=1" name="viewport" />

Now, we can prepare the main layout for our photos. Schematic structure looks like this:

现在，我们可以准备照片的主要布局。原理图结构如下所示：


    <section>
        <ul id="gallery">
            <li id="fullPreview"></li>
            <!-- single photo object -->
            <li>
                <a href="images/p1.jpg"></a>
                <img data-original="images/t1.jpg" src="img/effects/white.gif" alt="Photo 1" />
                <div class="overLayer"></div>
                <div class="infoLayer">
                    <ul>
                        <li><h2>Photo 1</h2></li>
                        <li><p>View</p></li>
                        <li><p>it</p></li>
                    </ul>
                </div>
                <div class="projectInfo">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
            </li>
            <!-- other photos -->
        </ul>
    </section>


    <section>
        <ul id="gallery">
            <li id="fullPreview"></li>
            <!-- single photo object -->
            <li>
                <a href="images/p1.jpg"></a>
                <img data-original="images/t1.jpg" src="img/effects/white.gif" alt="Photo 1" />
                <div class="overLayer"></div>
                <div class="infoLayer">
                    <ul>
                        <li><h2>Photo 1</h2></li>
                        <li><p>View</p></li>
                        <li><p>it</p></li>
                    </ul>
                </div>
                <div class="projectInfo">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
            </li>
            <!-- other photos -->
        </ul>
    </section>

There are 20 photos in our demo. I haven’t included all of them into our tutorial, but I hope that you understand how to add other your photos.

我们的演示中有20张照片。我没有将所有这些都包含在我们的教程中，但是我希望您了解如何添加其他照片。

步骤2. CSS (Step 2. CSS)

Basically, all the base styles are already presented in ‘least.min.css’ which is included with the package. But I made next adjustments for our demonstration:

基本上，所有基本样式都已包含在软件包中的“ least.min.css”中。但是我为演示做了下一个调整：

css / main.css (css/main.css)


section {
    background-color: #FFFFFF;
    box-shadow: none;
}
section li a,
section li .overLayer, section li .infoLayer {
    height: 187px;
    width: 250px;
}
section li .infoLayer ul li {
    padding: 5px 0 0;
}


section {
    background-color: #FFFFFF;
    box-shadow: none;
}
section li a,
section li .overLayer, section li .infoLayer {
    height: 187px;
    width: 250px;
}
section li .infoLayer ul li {
    padding: 5px 0 0;
}