jQuery插件实现图片墙小案例

简介: jQuery插件实现图片墙小案例

你想写出绚丽多彩的图片墙吗?想的话就来一起看一下接下来的内容吧

接下来就让我们使用两个简单的插件来实现图片墙小案例吧。编写之前需要提前下载lazyload懒加载插件和masonry瀑布流式布局插件。(百度可以搜到呦!)


1、使用的核心方法

a. 懒加载插件 – lazyload()方法


b.瀑布流插件 – masonry()方法


2、核心问题

必须保证所有图片延迟加载完毕后,才能实现瀑布流效果。


解决这个问题可以使用load方法,等懒加载图片加载完毕后,实现瀑布流效果。


具体实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片墙小案例</title>
    <script src="../../jquery-1.12.4.js"></script>
    <script src="../tuupola-jquery_lazyload/jquery.lazyload.js"></script>
    <script src="../masonry/masonry.pkgd.js"></script>
    <style>
        .grid {
            width: 80%;
            margin: 0 auto;
            overflow: hidden;
        }
        .imgs {
            float: left;
            display: block;
            width: 300px;
            margin: 7px;
        }
    </style>
</head>
<body>
    <div class="grid">
   //首先引入图片地址
        <img data-original="../imgs/2 (1).jpg" class="imgs">
        <img data-original="../imgs/2 (2).jpg" class="imgs">
        <img data-original="../imgs/2 (3).jpg" class="imgs">
        <img data-original="../imgs/2 (4).jpg" class="imgs">
        <img data-original="../imgs/2 (5).jpg" class="imgs">
        <img data-original="../imgs/2 (6).jpg" class="imgs">
        <img data-original="../imgs/2 (7).jpg" class="imgs">
        <img data-original="../imgs/2 (8).jpg" class="imgs">
        <img data-original="../imgs/2 (9).jpg" class="imgs">
        <img data-original="../imgs/2 (10).jpg " class="imgs">
        <img data-original="../imgs/2 (1).jpg" class="imgs">
        <img data-original="../imgs/2 (2).jpg" class="imgs">
        <img data-original="../imgs/2 (3).jpg" class="imgs">
        <img data-original="../imgs/2 (4).jpg" class="imgs">
        <img data-original="../imgs/2 (5).jpg" class="imgs">
        <img data-original="../imgs/2 (6).jpg" class="imgs">
        <img data-original="../imgs/2 (7).jpg" class="imgs">
        <img data-original="../imgs/2 (8).jpg" class="imgs">
        <img data-original="../imgs/2 (9).jpg" class="imgs">
        <img data-original="../imgs/2 (10).jpg" class="imgs">
    </div>
</body>
<script>
    // 图片墙效果 - 必须保证所有图片延迟加载完毕后,才能实现瀑布流效果
    // 懒加载--实现页面中的延迟加载
    $('.imgs').lazyload({
        threshold: 200,
        effect: 'fadeIn',
        load: function () {
            // 懒加载效果实现后实现瀑布流式布局
            $('.grid').masonry({
                itemSelector:'.imgs'
            }); 
        }
    });
</script>
</html>

此处添加一个小问题:懒加载和瀑布流混合使用时,使用哪个属性引入图片地址?

经测试得出结论如下:


单独使用懒加载插件,引入图片地址使用data-original属性。单独使用瀑布流插件使用scr属性引入图片地址。二者结合使用时,使用data-original属性引入图片地址。


目录
相关文章
|
9天前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
13 0
|
1天前
|
JavaScript 前端开发
JavaScript-jQuery的使用 + JS的案例
JavaScript-jQuery的使用 + JS的案例
8 0
|
7天前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
7天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
9天前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
9天前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
13 0
|
9天前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
10 1
|
9天前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
11 0
|
9天前
|
JavaScript
jquery选择器案例分享
jquery选择器案例分享
13 0
|
9天前
|
JavaScript
初识jQuery的案例
初识jQuery的案例
7 0