jQuery插件实现图片墙小案例

不苒

已于 2022-02-09 19:59:17 修改

阅读量1k

点赞数 2

分类专栏： jQuery 随笔文章标签： jquery

于 2020-11-09 00:25:12 首次发布

本文链接：https://blog.csdn.net/qq_49002903/article/details/109567733

版权

jQuery 随笔专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

接下来就让我们使用两个简单的插件来实现图片墙小案例吧。编写之前需要提前下载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属性引入图片地址。

不苒

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery插件实现图片墙小案例

你想写出绚丽多彩的图片墙吗？想的话就来一起看一下接下来的内容吧接下来就让我们使用两个简单的插件来实现图片墙小案例吧。编写之前需要提前下载lazyload懒加载插件和masonry瀑布流式布局插件。（百度可以搜到呦！）1、使用的核心方法 a. 懒加载插件 – lazyload()方法 b.瀑布流插件 – masonry()方法2、核心问题必须保证所有图片延迟加载完毕后,才能实现瀑布流效果。解决这个问题可以使用load方法，等懒加载图片加载完毕后，实现瀑布流效果。具体实现代码如下：&lt
复制链接

扫一扫